LWC Lifecycle Hooks in Salesforce

Table of Contents

Lightning Web Components (LWC) is a framework for building reusable, high-performance components for Salesforce’s platform. It is built on web standards and provides a performance boost over previous frameworks. LWC also offers a modern development experience and improved security.

One of the key concepts in LWC is the understanding of the lifecycle hooks available to developers. These hooks are callback methods that are triggered at specific stages of a component’s lifecycle. Understanding these hooks is crucial to building efficient and effective components.

In this blog post, we will be discussing the different lifecycle hooks available in LWC, their use cases, and how to utilize them to improve your components.

constructor

First, we have the constructor() lifecycle hook. This method is called when the component is first created and flows from parent to child.

At this stage, you cannot access child elements as they do not yet exist and properties are not passed to the component yet.

However, this is the ideal place to set up any initial state or properties that the component may need.

connectedCallback

Next, we have the connectedCallback() lifecycle hook. This method is called when the element is inserted into a document. Like the constructor() hook, this one also flows from parent to child.

It is a good place to perform initialization tasks such as fetching data, setting up caches or listening for events. You can also use it to establish communication with the current document or container and coordinate behavior with the environment.

Additionally, you can use this hook to subscribe and unsubscribe from a Message Channel. It’s worth noting that this hook can fire more than once, so if you want your code to run only once, make sure to add a check for that.

`renderedCallback`

The renderedCallback() lifecycle hook is called after every render of the component. This hook is specific to LWC and flows from child to parent. A component is re-rendered when the value of a property changes and that property is used either directly in a component template or indirectly in the getter of a property that is used in a template.

This hook is useful for performing tasks not covered by the template declarative syntax, such as adding a listener for a non-standard event from a component’s child. However, be careful when updating the state of your component in this hook, as it can cause an infinite loop.

`render`

The render() method is not technically a lifecycle hook, but it is a protected method on the LightningElement class.

It’s main use case is to conditionally render a template. The method must return a valid HTML template. It’s rare to call the render() method in a component, but it’s a useful way to switch between different templates depending on the component’s state.

`disconnectedCallback`

Finally, we have the disconnectedCallback() lifecycle hook. This method is called when the element is removed from the DOM.

This is the ideal place to clean up any resources or event listeners that the component may have established.

LWC Lifecycle hook example

// Parenthook.html
<template>
   hello parent hooks {sample}
   <c-childhooks></c-childhooks>
</template>

// Parenthook.js
import { LightningElement,api } from 'lwc';

export default class Parenthooks extends LightningElement {
    @api sample='hello';

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

    connectedCallback(){
        console.log('parent connected callback call');
    }

    render(){
        console.log('parent render method');       
    }

    renderedCallback(){
        console.log('parent render call back');
    }

    errorCallback(error, stack){
       console.log('parent error Call back (if an error    
       occur)');
    }

    disconnectedCallback(){
        console.log('parent disconnected call back');
    }
}

// Childhooks.html
<template>
   hello Child hooks 
</template>

//Childhooks.js
import { LightningElement } from 'lwc';

export default class Childhooks extends LightningElement {
   constructor(){
       super();
       console.log('child constructor call');
   }

   connectedCallback(){
       console.log('child connected callback');
   }

   render(){
        console.log('child render method');
   }

   renderedCallback(){
       console.log('child render callback');
   }

   errorCallback(error, stack){
       console.log('child error Call back (if an error    
       occur)');
   }

   disconnectedCallback(){
       console.log('child disconnected call back');
   }
}