Lifecycle Hooks

Overview

Lifecycle hooks are special callback methods that execute at specific stages of a component’s lifecycle. They allow you to run code when a component is created, added to the DOM, updated, or removed.

Lifecycle hooks are reserved method names. Do not create custom methods with these names.

Available Lifecycle Hooks

connectedCallback()

Called when the component is inserted into the DOM. Use this hook to:

Initialize component state
Fetch initial data
Register event listeners
Set up subscriptions

// viewToRefresh.js
import { LightningElement, wire } from 'lwc';
import getTotalNumber from '@salesforce/apex/AccountController.getTotalNumber';
import {
    registerRefreshHandler,
    unregisterRefreshHandler
} from 'lightning/refresh';
import { refreshApex } from '@salesforce/apex';

export default class ViewToRefresh extends LightningElement {
    refreshHandlerID;

    @wire(getTotalNumber)
    numOfAccounts;

    connectedCallback() {
        this.refreshHandlerID = registerRefreshHandler(
            this,
            this.refreshHandler
        );
    }

    disconnectedCallback() {
        unregisterRefreshHandler(this.refreshHandlerID);
    }

    async refreshHandler() {
        await refreshApex(this.numOfAccounts);
    }
}

Source: force-app/main/default/lwc/viewToRefresh/viewToRefresh.js:15-20

The connectedCallback() can fire more than once. For example, if you remove a component from the DOM and then reinsert it, the hook fires again.

renderedCallback()

Called after every render of the component. Use this hook to:

Perform DOM manipulations
Initialize third-party libraries
Measure element dimensions
Set focus on elements

// libsChartjs.js
import { LightningElement } from 'lwc';
import chartjs from '@salesforce/resourceUrl/chartJs';
import { loadScript } from 'lightning/platformResourceLoader';

export default class LibsChartjs extends LightningElement {
    error;
    chart;
    chartjsInitialized = false;

    config = {
        type: 'doughnut',
        data: {
            datasets: [
                {
                    data: [100, 200, 300, 400, 500],
                    backgroundColor: [
                        'rgb(255, 99, 132)',
                        'rgb(255, 159, 64)',
                        'rgb(255, 205, 86)',
                        'rgb(75, 192, 192)',
                        'rgb(54, 162, 235)'
                    ]
                }
            ],
            labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue']
        }
    };

    async renderedCallback() {
        if (this.chartjsInitialized) {
            return;
        }
        this.chartjsInitialized = true;

        try {
            await loadScript(this, chartjs);
            const canvas = document.createElement('canvas');
            this.template.querySelector('div.chart').appendChild(canvas);
            const ctx = canvas.getContext('2d');
            this.chart = new window.Chart(ctx, this.config);
        } catch (error) {
            this.error = error;
        }
    }
}

Source: force-app/main/default/lwc/libsChartjs/libsChartjs.js:62-77

The renderedCallback() fires frequently. Always use a guard to ensure expensive operations run only once or when necessary.

disconnectedCallback()

Called when the component is removed from the DOM. Use this hook to:

Clean up event listeners
Cancel pending operations
Unregister handlers
Clear timers and intervals

import { LightningElement, wire } from 'lwc';
import {
    registerRefreshHandler,
    unregisterRefreshHandler
} from 'lightning/refresh';

export default class ViewToRefresh extends LightningElement {
    refreshHandlerID;

    connectedCallback() {
        this.refreshHandlerID = registerRefreshHandler(
            this,
            this.refreshHandler
        );
    }

    disconnectedCallback() {
        unregisterRefreshHandler(this.refreshHandlerID);
    }
}

Source: force-app/main/default/lwc/viewToRefresh/viewToRefresh.js:22-24

errorCallback(error, stack)

Called when a descendant component throws an error. Use this hook to:

Handle errors in child components
Log errors to external services
Display error messages to users
Implement error boundaries

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ErrorBoundary extends LightningElement {
    error;

    errorCallback(error, stack) {
        // Log error details
        console.error('Error:', error);
        console.error('Stack:', stack);
        
        // Store error for display
        this.error = error;
        
        // Show toast notification
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'An error occurred',
                message: error.message,
                variant: 'error'
            })
        );
    }
}

The errorCallback() only catches errors in the component’s descendants, not in the component itself.

Lifecycle Flow

The typical lifecycle sequence is:

constructor() - Component instance is created
connectedCallback() - Component inserted into DOM
renderedCallback() - Component rendered (fires after every render)
disconnectedCallback() - Component removed from DOM

Common Patterns

Initialize Once Pattern

import { LightningElement } from 'lwc';

export default class InitOnce extends LightningElement {
    initialized = false;

    renderedCallback() {
        if (this.initialized) {
            return;
        }
        this.initialized = true;
        
        // Run initialization code once
        this.initializeComponent();
    }
    
    initializeComponent() {
        // Expensive initialization logic
    }
}

Subscription Pattern

import { LightningElement } from 'lwc';
import { subscribe, unsubscribe } from 'lightning/empApi';

export default class EventSubscriber extends LightningElement {
    subscription = {};

    connectedCallback() {
        this.handleSubscribe();
    }

    disconnectedCallback() {
        this.handleUnsubscribe();
    }

    handleSubscribe() {
        const messageCallback = (response) => {
            console.log('Event received:', response);
        };

        subscribe('/event/MyEvent__e', -1, messageCallback)
            .then(response => {
                this.subscription = response;
            });
    }

    handleUnsubscribe() {
        unsubscribe(this.subscription);
    }
}

Timer Pattern

import { LightningElement } from 'lwc';

export default class Timer extends LightningElement {
    intervalId;

    connectedCallback() {
        this.intervalId = setInterval(() => {
            this.updateTimer();
        }, 1000);
    }

    disconnectedCallback() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
        }
    }

    updateTimer() {
        // Update timer display
    }
}

Best Practices

Always clean up: Use disconnectedCallback() to clean up resources created in connectedCallback()
Guard renderedCallback(): Use flags to prevent running expensive operations on every render
Don’t manipulate state in renderedCallback(): This can cause infinite render loops
Use async carefully: Lifecycle hooks can be async, but be cautious about race conditions
Error boundaries: Implement errorCallback() in top-level components for better error handling

Restrictions

You cannot access child elements in the constructor(). Use connectedCallback() or renderedCallback() instead.

Don’t use this.template.querySelector() in constructor()
Don’t perform DOM manipulations in constructor()
Don’t call super() with parameters in the constructor
Don’t use the return statement in the constructor body

Get Started

Basics

Component Composition

Event Handling

Data Access

Component Features

Navigation

Styling

Advanced Topics

Guides

Overview

Available Lifecycle Hooks

connectedCallback()

renderedCallback()

disconnectedCallback()

errorCallback(error, stack)

Lifecycle Flow

Common Patterns

Initialize Once Pattern

Subscription Pattern

Timer Pattern

Best Practices

Restrictions

​Overview

​Available Lifecycle Hooks

​connectedCallback()

​renderedCallback()

​disconnectedCallback()

​errorCallback(error, stack)

​Lifecycle Flow

​Common Patterns

​Initialize Once Pattern

​Subscription Pattern

​Timer Pattern

​Best Practices

​Restrictions

​Related Resources

Overview

Available Lifecycle Hooks

connectedCallback()

renderedCallback()

disconnectedCallback()

errorCallback(error, stack)

Lifecycle Flow

Common Patterns

Initialize Once Pattern

Subscription Pattern

Timer Pattern

Best Practices

Restrictions

Related Resources