Life Cycle Hooks in LWC

Learn about the 5 Life Cycle Hooks in Lightning Web Components (LWC) — methods that let you run custom code at key moments in a component's life.

1. What are Life Cycle Hooks in LWC?

Life cycle hooks are methods that you can use to run custom code during key moments in the life of a Lightning Web Component. These moments include when the component is created, inserted into the DOM, rendered, or removed from the DOM.

LWC provides 5 Life Cycle Hooks:
• constructor() — Called when the component instance is created.
• connectedCallback() — Called when the component is inserted into the DOM.
• renderedCallback() — Called after every render of the component.
• disconnectedCallback() — Called when the component is removed from the DOM.
• errorCallback() — Called when an error occurs in the component or its children.

2. constructor()

The constructor() hook is called when the component instance is created. The first statement inside a constructor should always be super(). Calling super() will provide the correct value for the this keyword.

import { LightningElement } from 'lwc';

export default class LWCLifecycleExample extends LightningElement {
    constructor(){
        super();
        console.log('1. Constructor Called...');
    }
}

• You cannot access public properties (i.e. @api) inside the constructor.
• You also cannot access any HTML Tags inside the constructor.

3. connectedCallback()

The connectedCallback() hook is called when the component is inserted into the DOM. This is ideal for tasks like fetching data or setting up event listeners. It can be called more than 1 time as well. An example scenario: when a component is removed from the DOM and inserted again.

import { LightningElement } from 'lwc';

export default class LifecycleExample extends LightningElement {
    connectedCallback() {
        console.log('2. Connected Callback called...');
        // Fetch data or initialize third-party libraries here
        this.initializeComponent();
    }

    initializeComponent() {
        // code to data fetch
        this.message = 'Data loaded successfully!';
    }
}

• Best place to fetch Apex data or subscribe to events.
• Can fire multiple times if the component is removed and re-added to the DOM.

4. renderedCallback()

The renderedCallback() hook is called after every render of the component. As the component can render multiple times, this callback method will also be called each time the component is re-rendered. This is useful when you need to interact with or manipulate the DOM after the component has been displayed.

export default class LifecycleExample extends LightningElement {
    renderedCallback() {
        console.log('3. renderedCallback called...');
        const headerElement = this.template.querySelector('h1');
        if (headerElement) {
            headerElement.style.color = 'blue';
        }
    }
}

• Called after every render — including the first render and all re-renders.
• Avoid making state changes here that trigger more re-renders — it can cause an infinite loop.

5. disconnectedCallback()

The disconnectedCallback() hook is triggered when the component is removed from the DOM. This is often used to clean up tasks like removing event listeners or clearing intervals and timers.

export default class LifecycleExample extends LightningElement {
    connectedCallback() {
        this.timerId = setInterval(() => {
            console.log('Timer is running');
        }, 1000);
    }

    disconnectedCallback() {
        clearInterval(this.timerId);
        console.log('Component has been removed and timer cleared');
    }
}

• Use this hook to remove event listeners added in connectedCallback().
• Always clear timers and intervals here to avoid memory leaks.

6. errorCallback(error, stack)

The errorCallback() hook is invoked when an error occurs either in the component or in its child components. This is useful for catching and handling errors gracefully.

export default class LifecycleExample extends LightningElement {
    errorCallback(error, stack) {
        console.error('Error occurred: ', error);
        console.log('Stack trace: ', stack);
        this.hasError = true;
    }
}

• error: This is a JS error Object that was thrown.
• stack: A string representing the stack trace of the error, which helps us track where the error originated from.