Chapter 21: Lifecycle hooks in Lightning Web Component

In this chapter we will discuss about the basic overview of lifecycle hooks in Lightning Web Component. Lifecycle hooks are callback methods that let us run code at each stage of a component’s lifecycle.

Topics Covered:

• constructor()
• connectedCallback()
• rendered()
• renderedCallback()
• disconnectedCallback()
• errorCalllbback()

In Aura framework init(), render(), rerender(), afterRender(), unrender() methods were used to handle the lifecycle of components.

Similarly, Lightning web components have callback method, that are used to handle lifecycle of the components. These are called lifecycle hooks. You can override these hooks to modify the behavior.

Note: All lifecycle hooks are part of HTML custom element specification except renderedCallback() and errorCallback() which are specific to LWC.

Understanding of the diagram:

This diagram is talking about one parent and one child component.

1. Constructor is called
2. Public property are set on parent
3. Parent is inserted to DOM
4. Once parent is inserted to DOM, Connected callback is called on parent
5. From this connected callback as parent is already inserted, you can reference different DOM elements
6. Parent is rendered
7. Once parent is rendered, Constructor is called on the child
8. Public property of child are set
9. Child is inserted to DOM
10. Once child is inserted to DOM, Connected callback is called on child
11. Child is rendered
12. Once child is rendered, rendered callback is called
13. Once child components are rendered on the screen, then parents rendered callback is called.

Lifecycle Hooks Explained:

constructor()

• Hook that fires when a component instance is created.
• 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.
• Don’t use a return statement inside the constructor body, unless it is a simple early-return (return or return this).
• At that point, the component properties won’t be ready yet.
• It flows from parent to child.

Do not assign any property in Constructor because they are not ready at this point.The flow of Constructor is flows from parent to child. It means if there are child components in LWC, then first parent constructor will be called, followed by child constructor.

import { LightningElement } from 'lwc'; 
export default class App extends LightningElement { 

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

connectedCallback()

• Fires when a component is inserted into the DOM.
• The component properties will be ready, but the child elements won’t be yet.
• It can fire more than once. 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.
• It flows from parent to child.
• The equivalent in Aura is the init() event.

import { LightningElement } from 'lwc'; 
export default class App extends LightningElement { 

connectedCallback(){ 
console.log('In connectedCallback'); 
}
}

render()

• Hook that overrides the standard rendering functionality.
• Gets invoked after connectedCallback() and must return a valid HTML template.
• It can fire more than once.
• It flows from parent to child.

import { LightningElement } from 'lwc'; 
export default class App extends LightningElement { 

render(){ 
console.log('In render'); 
}
}

renderedCallback()

• Fires when a component rendering is done.
• It can fire more than once.
• It flows from child to parent.

The renderedCallback() is unique to Lightning Web Components.

In simple words, if you are dealing with nested parent child component, renderedCallback() method in child component will get fired first.

Note, You can set the properties in renderedCallback but best practice is do not use renderedCallback() to change the state of a component, such as loading values or setting properties. Use getters and setters instead.

import { LightningElement } from 'lwc'; 
export default class App extends LightningElement { 

renderedCallback(){ 
console.log('In renderedCallback'); 
}
}

Parent Flow Component Removal

1. Parent is removed from DOM
2. Disconnected Callback is called on parent
3. Child removed from DOM
4. Disconnected Callback on the child is called

disconnectedCallback()

• Fires when a component is removed from the DOM.
• It can fire more than once.
• It flows from parent to child.
• The equivalent in aura was the unrender() methods of the custom renderer file.

When this component removed form DOM, it will fire disconnectedCallback and clear array.

import { LightningElement } from 'lwc'; 
export default class App extends LightningElement 
{ 
disconnectedCallback(){
console.log('In disconnectedCallback'); 
} 
}

errorCallback(error, stack)

Captures errors that may happen in all the descendant components lifecycle hooks.

errorCallback(error, stack) { 
alert(error);
}

Use of lifecycle hooks 

Dynamic rendering of components: we can use the render() hook to render different templates according to some conditions.

Component that is an error boundary for the descendent components lifecycle hooks: we can use the errorCallback() to implement such component.

Together we can learn faster !

Join LWC study group on Telegram 

Subscribe to Youtube channel and blog to get latest updates