Chapter 22: Sequence of Lifecycle Hooks in Lightning Web Component

Hello friends, in this chapter we will learn more about lifecycle hook with help of example.

Topics Covered:

• Example 1: grandparent, parent, child component relation
• Understanding Code Line by Line for Example 1
• Console Output of Example 1
• Understanding Lifecycle Hook Sequence for Example 1
• Example 2: parent, childOne and childTwo component  relation
• Understanding Code Line by Line for Example 2
• Understanding Lifecycle Hook Sequence for Example 2

Example 1

Let’s say we have three components:

• grandParent Component
• parent Component
• Child Component

Grandparent component contains parent component, parent component contains child component. Like below image:

Code Snippet:

grandParent.html

<template>
   <lightning-card>
    I am a grandparent component
   </lightning-card>

    <c-child> </c-child>
</template>

grandParent.js

import { LightningElement} from 'lwc';

export default class App extends LightningElement {

    constructor(){
        super();
        console.log('constructor -grandparent');
    }

    connectedCallback(){
        console.log('connectedcallback -grandparent');
    }

    renderedCallback(){
        console.log('renderedCallback -grandparent');
    }

}

parent.html

<template>
    <lightning-card>
    I am a parent component
    </lightning-card>
    <c-grandchild> </c-grandchild>
</template>

parent.js

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {

    constructor(){
        super();
        console.log('constructor - parent');
    }

    connectedCallback(){
        console.log('connectedcallback - parent');
    }

    renderedCallback(){
        console.log('renderedCallback - parent');
    }

}

child.html

<template>
    <lightning-card>
    I am a child component
    </lightning-card>
</template>

child.js

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {

    constructor(){
        super();
        console.log('constructor - child');
    }

    connectedCallback(){
        console.log('connectedcallback - child');
    }

    renderedCallback(){
        console.log('renderedCallback - child');
    }

}

Understanding Code Line by Line

If you observe I have added lifecycle hooks and console.log inside it to understand lifecycle of the component.

constructor(){
super();
console.log('constructor - parent');
}

constructor is fired when component instance is created.It flows from parent to child.The first statement must be super() with no parameters. This call establishes the correct prototype chain and value for this. Always call super before touching this.

connectedCallback(){
console.log('connectedcallback - parent');
}

Fires when a component is inserted into the DOM. It flows from parent to child.

renderedCallback(){
console.log('renderedCallback - parent');
}

Fires when a component rendering is done. It fires from child to parent.

Output

Console Output

Observe the Sequence

1.Constructor of grandparent is called.

2.Once grandparent is inserted to DOM, connected callback is called on grandparent

Now as grandparent contains parent

3.Constructor of parent is called

4.Connected callback is called on parent

As parent contains child

5. Constructor of child is called

6. Connected callback of child is called

Now that component rendering is done. rendered callback is called from child to parent

7. Once child is rendered, rendered callback is called on child

8.Rendered callback of parent is called

9. Rendered callback of grandparent is called

Example 2

Let’s say we have three components:

• parent Component
• childOne Component
• ChildTwo  Component

Parent component contains child 1 component and child 2 component.

Code Snippet:

parent.html

<template>
    <lightning-card>
    I am a parent component<br/>
    <c-child-one> </c-child-one>
    <c-child-two> </c-child-two>
    </lightning-card>
</template>

parent.js

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    constructor(){
        super();
        console.log('constructor - parent');
    }

    connectedCallback(){
        console.log('connectedcallback -parent');
    }

    renderedCallback(){
        console.log('renderedCallback -parent');
    }
}

childOne.html

<template>
   I am a child one component<br/>
</template>

childOne.js

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {

    constructor(){
        super();
        console.log('constructor - childOne');
    }

    connectedCallback(){
        console.log('connectedcallback - childOne');
    }

    renderedCallback(){
        console.log('renderedCallback - childOne');
    }

}

childTwo.html

<template>
   I am a childTwo component
</template>

childTwo.js

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    constructor(){
        super();
        console.log('constructor - childTwo');
    }
    connectedCallback(){
        console.log('connectedcallback - childTwo');
    }
    renderedCallback(){
        console.log('renderedCallback - childTwo');
    }
}

Output

Console Output 

Observe the Sequence

1.Constructor of parent is called

2.Once parent is inserted to DOM, connected callback is called on parent

Now as parent contains childOne and ChildTwo

3.Constructor of childOne is called

4.Connected callback on childOne is called

5. As child one is rendered. renderedCallback on childOne is called

Now as parent contains another childTwo 

6. Constructor of childTwo is called

7. Connected Callback of childTwo is called

8.As child two is rendered. renderedCallback on childTwo is called

9. Finally, as parent is completely rendered, renderedCallback of parent is called.

 

I hope you enjoyed the chapter !

 

Together we can learn faster !

Join LWC study group on Telegram 

Subscribe to Youtube channel and blog to get latest updates