Types of Life cycles Hooks –

Below are the 5 lifecycle hooks that we have in LWC in Salesforce –

1. constructor()
2. connectedCallback()
3. renderedCallback()
4. disconnectedCallback()
5. errorCallback(error, stack)

Let’s see them in details –

1. constructor()

The constructor() is the first lifecycle hook to execute. It is called when the LWC component instance is created. This happens before it is added to the DOM.

• Key Points:
  1. Flows from parent to child i.e. if you have a parent and child component, the constructor() defined in the parent component will fire first.
  2. Used for initializing private variables.
  3. The first statement must be super(). This is because the Lightning Web Component inherits from LightningElement. It includes its own constructor that should not be skipped during initialization.
  4. Child elements and Public properties (@api) can’t be accessed. This is because they don’t exist yet and are undefined.
  5. You cannot access or interact with host element and also can’t add properties to host element. This is because the component is not fully loaded in the DOM.
  6. Avoid return (other than an early return;) or using document.write()/open().
  7. Reference Link for for some more constructor() use case examples – Link

2. connectedCallback()

• Key Points:
  1. Flows from parent to child i.e. if you have a parent and child component, the connectedCallback() defined in the parent component will fire first.
  2. To check if a component is connected to the DOM use this.isConnected.
  3. Can be used for –
     • Calling Apex Method.
     • Initializing event listeners
     • Calling External API using Fetch.
     • Calling Navigation service.
     • Subscribing and Unsubscribing from a Message Channel.
  4. Public properties (@api) can be accessed.
  5. You can access or interact with host element and also add properties to host element, using this, this.template and this.template.host.
  6. Child elements can’t be accessed. This is because they don’t exist yet and are undefined.
  7. Can run multiple times, such as when an element is reordered. Add logic to ensure code runs only once if needed.
  8. Reference Link for for some more connectedCallback() use case examples – Link

• Child Component:
  1. Fetching account data using Apex
     • The child component fetches account data. It does this by invoking the fetchAccounts method from the AccountController Apex class.The results are assigned to the accounts property, which dynamically updates the UI to display account names. Any errors during the data fetch are handled and logged.
  2. Assigning a click event listener to the host element
     • In the connectedCallback method, the child component adds a “click” event listener to its host element using the addEventListener method. This listener is defined as the handleHostClick method. It dispatches a custom event called hostclick whenever the host element is clicked.
  3. Setting attributes like CSS classes and custom attributes to the host element
     • The child component modifies the host element by:
       • Adding a CSS class child-host to apply specific styles.
       • Setting a custom data attribute “custom_attr” with the value “Data from child”.
       • These modifications allow the parent component to apply and detect specific styles or values.
  4. Demonstrating that child elements (like the <h1> element) cannot be accessed
     • Attempts to access the <h1> element within the child component during the connectedCallback lifecycle hook result in undefined. This is because they don’t exist yet in the DOM.
  5. Demonstrating that public properties (valuePassedFromParentUsingProperty) can be accessed
     • Trying to access the public property valuePassedFromParentUsingProperty results in values. This is because all the public properties (decorated with @api) are received from the parent component.
• Parent Component:
  1. The parent component includes a element and binds a hostclick event handler (handleHostClick). When the child’s host element is clicked, the parent component updates the parentValue property. It updates this property with data from the child element’s custom attribute (custom_attr).

3. renderedCallback()

The renderedCallback() lifecycle hook fires after the component renders or re-renders into the DOM.

• Key Points:
  1. Flows from child to parent component i.e. if you have a parent and child component, the renderedCallback() defined in the child component will fire first.
  2. renderedCallback() runs multiple times, as a component is usually rendered many times during the lifespan of an application. To avoid repeated execution, use a boolean flag (e.g., isRendered) to track if renderedCallback() has already executed.
  3. Can be used for below, but make sure to use guard logic using boolean flag to guarantee a one-time run of renderedCallback()-
     • Loading custom CSS style from static resources.
     • Loading external scripts from static resources.
     • Calling Apex Method
     • Calling External API using Fetch.
     • Calling Navigation service.
     • Adding event listeners.
  4. Perform logic after a component has finished rendering. This is useful for tasks related to UI interaction. Examples include computing node sizing or adding event listeners.
  5. Avoid updating component state (e.g., @track or public properties) within renderedCallback(), as it can lead to infinite rendering loops.Instead, use getters and setters for reactive changes.
  6. Child elements can be accessed using this.template.querySelector() and this.template.querySelectorAll().
  7. Event listeners added in renderedCallback won’t duplicate, as browsers ignore identical listeners. However, it’s best practice to remove them in disconnectedCallback to avoid potential memory leaks.
  8. Reference Link for for some more renderedCallback() use case examples – Link

Rendered Call back example Code –

• Rendered Call Back Ex LWC component shows example of below functionalities –
  1. Avoid repeated execution of renderedCallback():
     • Usage of boolean property “hasRendered” to run renderedCallback() only one time.
  2. Loading Custom Style From Static Resource Load Style ‘lightning/platformResourceLoader’:
     • Loading custom style from static resources and adding custom style on “sample button” after component has rendered.
  3. Adding Dynamic Event Listner After The Component is Rendered:
     • Adding “click” event listener to “sample button” dyamically in js.

4. disconnectedCallback()

The disconnectedCallback() lifecycle hook fires when the component is removed from the DOM.

• Key Points:
  1. Flows from child to parent component i.e. if parent and child component are removed, the disconnectedCallback() defined in the child component will fire first.
  2. Can be used to clean up work done in the connectedCallback() like –
     • Cleaning up event listeners to prevent memory leaks.
     • Unsubscribing from message channel.
     • Removing or resetting timers such as setTimeout or setInterval.
     • Disconnecting observers like MutationObserver or IntersectionObserver.
     • Releasing references to DOM elements or data bindings.
     • Purging caches
  3. Important to release resources: Ensures efficient memory usage and prevents unintended behavior in the application
  4. Runs once for each component removal: Executes each time the component is removed from the DOM. Add logic to avoid redundant cleanup if necessary.

Disconnected Call Back Example Code –

The example LWC showcases the below functionality –

• Child Component: Shows the below examples in disconnectedCallback():
  1. Setting up an interval and event listener
     • The child component adds a click event listener to its host element. When clicked, it triggers the handleHostClick method, which dispatches a custom event named hostclick.
     • In the connectedCallback lifecycle hook, an interval is created using setInterval, which logs a message to the console every second. This simulates a recurring task.
  2. Handling resource cleanup in disconnectedCallback()
     • Interval Cleanup: When the child component is removed from the DOM, the disconnectedCallback lifecycle hook clears the interval. It uses clearInterval to prevent memory leaks.
     • Event Listener Removal: The click event listener is removed from the host element. This ensures no residual listeners remain after the component is disconnected.
• Parent component
  1. The parent component toggles the visibility of the child component using the show property. The element is conditionally rendered based on this property using the <template if:true> directive.
  2. A button in the parent component toggles the show property. This allows users to dynamically add or remove the child component from the DOM.

5. errorCallback(error, stack)

The errorCallback() lifecycle hook acts as an error boundary for uncaught exceptions in descendant components or template event handlers.It is invoked when the component throws error in one of the lifecycle hooks (instantiating the component, connecting or rendering).

• Key Points:
  1. Similar to JavaScript catch{} block, has two parameters.
     • error is the thrown error object.
     • stack is a string indicating the component path (e.g., <c-parent> <c-child>).
  2. Triggered if a descendant component (child or nested child) in the same DOM tree throws an error during the rendering or lifecycle phases
  3. To capture the stack information and render a different template when error is occurred.
  4. Can be used for:
     • Logging errors for debugging or monitoring purposes.
     • Displaying user-friendly error messages.
     • Preventing the error from propagating further in the component hierarchy.
     • Sending error details to external logging services.
  5. Handles errors only for child components within the current component’s DOM subtree.
  6. Does not catch all errors like Errors thrown asynchronously (e.g., in a setTimeout) or errors outside the component tree, like global event handlers

Error Call back example Code –

The example LWC showcases the below functionality –

• Before errorCallback() in Parent Component – Let’s suppose we have an error in the child component. This occurs due to the child component setting a custom property to the host element. If the parent component doesn’t have an errorCallback(), the child component will not display on the UI. An error message will be displayed as. –

errorCallBackChildLwc.html

<template>
    <div style="padding: 1rem;">
        <p>Child Component</p>
    </div>
</template>

errorCallBackChildLwc.js

import { LightningElement } from 'lwc';

export default class ErrorCallBackChildLwc extends LightningElement {

    connectedCallback() {
        // Access the host element
        const host = this.template.host;

        // Set a custom data attribute on the host element
        this.template.dataset.custom = "Data from child using custom attributes";
    }
}

errorCallBackParentLwc.html

<template>
    <lightning-card title="Error Call Back Example - LWC">
        <div style="padding: 1rem;">
            <p>Parent Component</p>
            <c-error-call-back-child-lwc onhostclick={handleHostClick}></c-error-call-back-child-lwc>
        </div>
    </lightning-card>
</template>

errorCallBackParentLwc.js

import { LightningElement } from 'lwc';

export default class ErrorCallBackParentLwc extends LightningElement {
}

• After errorCallback() in Parent Component – The error in the child component is handled in the parent component’s errorCallback(). The child component will be rendered on UI.

import { LightningElement } from 'lwc';

export default class ErrorCallBackParentLwc extends LightningElement {

    errorCallback(error, stack){
        console.log('Parent error callback called, error = ' + error + ', stack = ' + stack);
    }
}

LWC Lifecycle Flow –

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.

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

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