Life Cycle Hooks In Lightning Web Components

A lifecycle hook is a callback method triggered at a specific phase of a component instance’s lifecycle. There are a number of life cycle hook methods available, we are going to discuss them one by one.

constructor()

• Constructor is invoked when the component is created. It is similar to init method in aura component. Only difference here is that flow is from parent to child as opposite to that of init where the child component’s init is called first and then the parent component’s init gets called.

• Since flow is from parent to child, do not access child elements in the component body because they don’t exist yet.

• Also, do not access the element’s public properties , because they’re set after the component is created.

• The constructor method’s first statement has to be super. It has to be a call to a super method with no parameters. Why it is required ? so that it can assign the proper prototype and value to “this” attribute.

connectedCallback()

• Connectedcallback is Invoked when the component is inserted into DOM. That means whenever a component is created constructor is in invoked and whenever that component is inserted into Dom connected callback is invoked.

• Since  flow is from parent to child, do not access child elements in the component body because they don’t exist yet.

• We can access the Parent elements and modify them in this hook.

disconnectedCallback()

• disconnectedCallback is invoked when component is removed from DOM.

• This hook flows from parent to child.

render()

• This hook is used to override the standard rendering functionality.

• It gets called after connectedCallback() and it returns a valid HTML temaplate.

• This hook flows from parent to child.

renderedCallback()

• This hook is Called after component is rendered.

• This hook flows from child to parent.

errorCallback(error, stack)

• This hook is called when the component throws an error in one of its hooks.

• The Error argument is a JavaScript native error object and the stack argument is a string.

• This method works like a JavaScript catch{} block for catching errors.

We will created two components lifecyclehooks and lifecycleChild and add above methods one by one.

lifecyclehooks.html

<template>
    <div>Inside Template 1</div>
    <c-lifecycle-child></c-lifecycle-child>
</template>

lifecyclehooks.js

import { LightningElement, api } from 'lwc';
import firsttemplate from './lifecyclehooks.html';
import secondtemplate from './lifecyclehooks2.html';
export default class Lifecyclehooks extends LightningElement {
@api templateno = 'temp1';
    constructor(){
        super();
        console.log('Inside constructor');
    }
    connectedCallback()
    {
        console.log('Inside connected callback');
    }
    disconnectedCallback(){
        console.log('Inside disconnected callback');
    }
    render()
    {
        console.log('Inside render');
        if(this.templateno==='temp1')
        return firsttemplate;
        else return secondtemplate;
    }
    renderedCallback(){
        console.log('insiderender callback');
    }
    errorCallback(error, stack)
    {
        console.log('error callback'+error);

    }
}

lifecycleChild.html

<template> 
</template>

lifecycleChild.html

import { LightningElement } from 'lwc';

export default class LifecycleChild extends LightningElement {
    connectedCallback() {
        throw new Error('Whoops!');
   }
}

We will add lifecyclehooks inside aura application and load the application. Notice the console log statements and observe the order in which each life cycle hooks gets executed.

Also, we have added the child component “lifecycleChild” to throw error from it, which is getting caught by lifecyclehooks component using errorCallback.

So , we will wrap up this post here . Stay tuned for next posts !

Advertisement