Lightning Web Component Lifecycle hooks

Lightning web components have a lifecycle managed by the framework. The framework creates components, inserts them into the DOM, renders them, and removes them from the DOM. It also monitors components for property changes.

Lifecycle Flow:

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

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

constructor()

The constructor() method fires when a component instance is created.

Don’t add attributes to the host element during construction. You can add attributes to the host element in any other lifecycle hook.

The constructor flows from parent to child.

These requirements from the HTML: Custom elements spec apply to the constructor().

• 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).
• Don’t use the document.write() or document.open() methods.
• Don’t inspect the element’s attributes and children, because they don’t exist yet.
• Don’t inspect the element’s public properties, because they’re set after the component is created.

connectedCallback() and disconnectedCallback()

The connectedCallback() lifecycle hook fires when a component is inserted into the DOM. The disconnectedCallback() lifecycle hook fires when a component is removed from the DOM.

Both connectedCallback() and disconnectedCallback() lifecycle hooks flows from parent to child.

renderedCallback()

The renderedCallback() lifecycle hook fires after a component has finished the rendering phase. This lifecycle hooks flows from child to parent.

Updating the state of the component in renderedCallback() can cause an infinite loop. Don’t update any property or field in renderedCallback(). Don’t update a wire adapter configuration object property in renderedCallback()

Note: Wire adapter we have covered in Wire Services

errorCallback()

errorCallback() captures errors that occur in the descendant’s lifecycle hooks or during an event handler declared in an HTML template.
You can code the error boundary component to log stack information and render an alternative view to tell users what happened and what to do next.

For example, refer the following:

Create a new component(LWC) and name it as helloLwcChild. Add the following code into helloLwcChild.js

import { LightningElement } from 'lwc';

export default class HelloLwcChild extends LightningElement {
    connectedCallback() {
        throw new Error('errrrrrr');
    }
}

We are using helloLwc component which we created earlier. Add the following code into the component’s HTML and JS respectively.

<template>
    <lightning-card>
        <p class="slds-p-horizontal_small">
            {welcomeMessage}
        </p>

        <c-hello-lwc-child></c-hello-lwc-child>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';

export default class HelloLwc extends LightningElement {
    welcomeMessage = "Hey! Welcome to SalesforceBlue :)"
    error;
    
    errorCallback(error, stack) {
        this.error = error;
        console.log('error > ' + error);
        throw error;
    }
} 

Save and deploy these components. Add helloLwc component to a lightning app page and notice the behavior. You will get an error response as below:

Thus, using errorCallback() we can create an error boundary component that captures errors in all the descendent components in its tree

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂