Lightning Web Component Life Cycle

The Lightning web component life cycle has a lifecycle controlled by the framework. The framework creates components, inserts them into the DOM, renders them, and removes them from the DOM. It additionally monitors components for property changes.
A lifecycle hook is a callback method triggered at a specific phase of a component instance’s lifecycle.

During various levels of a life cycle component-specific pre-described methods are invoked and this is how the list goes.

• constructor()
• connectedCallback()
• renderedCallback()
• disconnectedCallback()
• errorCallback(error, stack)

Lifecycle Flow

This diagram shows the flow of the component lifecycle from creation through the render.

This diagram shows what happens when a component instance is removed from the DOM.

1. constructor() – First Lifecycle Hooks of the Lightning Web Component (LWC) Life Cycle

constructor() is called when the component is created. This hook flows from parent to child, which means that it fires in the parent first. You can’t access child elements because they don’t exist yet. Properties aren’t passed yet, either. Properties are assigned to the component after construction and before the connectedCallback() hook. 

As a mandate, we need to invoke super() from the constructor. As every LWC component extends LightningElement and since LightningElement has a constructor, we are not supposed to bypass invoking that parent constructor.

import { LightningElement } from 'lwc'
export default class HelloWorld extends LightningElement{
	constructor(){
    	super();
    }
}

2. connectedCallback() – Second Lifecycle Hooks of the Lightning Web Component (LWC) Life Cycle

connectedCallback()is called when the element is inserted into a document. This hook flows from parent to child. You can’t access child elements because they don’t exist yet.
By the time this method is invoked, all the @api properties would have received the data from the parent and we can use that data to make a call to the Apex method.

The connectedCallback() a hook can fire more than one time. For example, if you remove an element and then insert it into another position, such as when you reorder a list, the hook fires several times. If you want code to run one time, write code to prevent it from running twice.

Note: To check whether a component is connected to the DOM, you can use this.isConnected.

import { LightningElement } from 'lwc'
export default class HelloWorld extends LightningElement{
	connectedCallback(){
    	console.log('CONNECTED CALLBACK');
    }
}

3. renderedCallback()– Third Lifecycle Hooks of the Lightning Web Component (LWC) Life Cycle

renderedCallback() is called after every render of the component. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification. This hook flows from child to parent.
Once the component is completely rendered that’s when this Life Cycle Hook in LWC gets invoked. Since the complete component is rendered we can have some business logic that involves the DOM.

Note:

1. Do not use renderedCallback() to change the state of a component, such as loading values or setting properties. Use getters and setters instead.
2. Don’t update a wire adapter configuration object property in renderedCallback(), as it can result in an infinite loop.
3. Don’t update a reactive property or field in renderedCallback(), as it can result in an infinite loop.

import { LightningElement } from 'lwc'
export default class HelloWorld extends LightningElement{
	renderedCallback(){
    	console.log('RENDERED CALLBACK');
    }
}

4. disconnectedCallback()– Fourth Lifecycle Hooks of the Lightning Web Component (LWC) Life Cycle

disconnectedCallback() is called when the element is removed from a document. This hook flows from parent to child.
When you want to have some logic that has to be executed when the component is destroyed this Life Cycle Hook in LWC comes in handy.

Use disconnectedCallback() to clean up work done in the connectedCallback(), like purging caches or removing event listeners.
You can also use this hook to unsubscribe from a message channel.

import { LightningElement } from 'lwc'
export default class HelloWorld extends LightningElement{
	disconnectedCallback(){
    	console.log('DISCONNECTED CALLBACK');
    }
}

5. errorCallback(error, stack) – Fifth Lifecycle Hooks of the Lightning Web Component (LWC) Life Cycle

errorCallback(error, stack) is called when a descendant component throws an error. The error argument is a JavaScript native error object, and the stack argument is a string. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification.

This is pretty much straight forward when there is an error in the process of instantiating the component, connecting, or rendering the component this Life Cycle Hook gets fired up.  

import { LightningElement } from 'lwc'
export default class HelloWorld extends LightningElement{
	errorCallback(){
    	console.log('ERROR CALLBACK');
    }
}

For more details refer to the official link.