Lightning Web Component (LWC) – Implement the LifeCycle Hooks – Order of execution

LIFECYCLE HOOKS:

A lifecycle hook is a callback method triggered at a specific phase of a component instance’s lifecycle.

LIST OF LIFECYCLE HOOK CALLBACK METHODS IN LWC:

1. constructor()
2. connectedCallback()
3. renderedCallback()
4. render()
5. disconnectedCallback()
6. errorCallback(error, stack)

constructor fires when a component instance is created. The first statement of the constructor must be super with no parameters. Constructor in LWC flows from parent to child. We can able to define the variable, load the data and set the value in the constructor. We can’t able to access the elements, dispatch events, and create multiple constructors in the js file.

connectedCallback is called when the component is inserted into the DOM. The flow is from parent to child. It will be fired more than once. We can able to set the properties, load the data, dispatch the custom event, and create multiple connectedCallbacks in js. When we write multiple connectedCallbacks the last one will get executed and it will override the value.

renderedCallback hook called every render of the component. This hook flows from child to parent. It gets executed even though when you click on a button so we will not able to update the values.

render updates the UI, used to render the template conditionally, may be called before or after connectedCallback.

disconnectedCallback is called when the component is removed from the element. This method flows from parent to child. We use this method to clean up work done in connectedCallback, like purging caches or removing event listeners. We can also use this method to unsubscribe from a message channel.

errorCallback will call when the component throws an error in one of its callback methods. The error argument is a JavaScript native error object, and the stack argument is a string.

Let’s create a parent-child LWC component to see the execution order of the life cycle hooks mentioned above.

masterComponent.html:
<template>
    <lightning-card>
        <h1>Hello this is Account Datatable Page !</h1>
        <lightning-button onclick={changeHandler} label="Click to go Contact Datatable Page" name="button1">
        </lightning-button>
    </lightning-card>
</template>

masterComponent.js:
import { LightningElement, track, api, wire } from 'lwc';
import SHEET1 from './masterComponent.html';
import SHEET2 from './childComponent.html';

export default class MasterComponent1 extends LightningElement {

    lst = [];
    @api sheet = 'masterComponent';

    constructor() {
        super();
        console.log('Iam Constructor');
        
    }

    connectedCallback() {
        this.lst.push('Hi Master');
        console.log('Iam ConnectedCallback');
        console.log(this.lst);
    }

    disconnectedCallback() {
        this.lst = [];
        console.log('Iam disconnectedCallback');
    }

    changeHandler() {
        if (this.sheet == 'masterComponent')
            this.sheet = 'childComponent';
        else this.sheet = 'masterComponent';
    }
    changeHandler1() {
        if (this.sheet == 'childComponent')
            this.sheet = 'masterComponent';
        else this.sheet = 'childComponent';
    }

    render() {
        if (this.sheet == 'masterComponent')
            return SHEET1;
        else return SHEET2;
    }

    renderedCallback() {
        console.log("Iam renderedCallback");
        if (this.sheet == 'childComponent') {
            console.log(this.sheet);
            var button = this.template.querySelectorAll("lightning-button");
            button.forEach(function (element) {
                console.log(button.name);
                if (element.name == 'button2') {
                    element.variant = "brand";
                }
            }, this);
        }
    }
    errorCallback(error,stack){
        console.log('Iam error')
        alert('error'+error);
        alert('stack'+stack);
    }

}

childComponent.html:
<template>
    <lightning-card>
        <h1>Hello this is Contact Datatable Page !</h1>
        <lightning-button onclick={changeHandler1} label="Click to go Account Datatable Page" name="button2">
        </lightning-button>
    </lightning-card>
</template>

Expected order of execution: The constructor(1) will run first. Then connectedCallback (2), and renderedCallback(3) will run.

Then when we click on the button in our component again renderedCallback will run again. Whenever we click on the button every time renderedCallback will run.

For example, if we click any one of the tabs in our org and come back to the tab where our component is placed and now check the console disconnectedCallback will be run on this time. Because disconnectedCallback will run whenever the object is closed or deleted.