Introduction
Lightning Web Components (LWC) is a modern framework introduced by Salesforce for building lightning-fast, web standards-compliant UI components.
LWC simplifies the development process and ensures performance optimization.
Understanding LWC lifecycle hooks is crucial for managing the component’s lifecycle efficiently.
What are Lifecycle Hooks in LWC?
Lifecycle hooks are special callback methods in LWC that allow developers to hook into key events during a component’s lifecycle.
They enable actions at specific stages, such as initialization, rendering, data changes, and cleanup.
Here is the list of all lifecycle hook methods in LWC:
- constructor()
- connectedCallback()
- renderedCallback()
- disconnectedCallback()
- errorCallback()
Lifecycle Hook in Detail
1. Constructor()
- Constructor is the 1st step in the lifecycle hook.
- It is called when the LWC component is created.
- Constructor is a place – where you initialize your component’s state and assign default values to its properties.
- At this stage, the component isn’t yet connected to the page, so you can’t interact with any elements in the DOM.
- It’s mainly for basic setup tasks like defining initial values for variables.
- The hook flows from Parent component to Child component.
Example:
export default class LifecycleDemo extends LightningElement {
constructor() {
super(); // Always call super() in the constructor.
console.log('constructor called');
this.state = { value: 'initial state' };
}
}
Checkout the post below to learn more about Constructor() Lifecycle hook in LWC, complete with examples.
2. connectedCallback()
- The connectedCallback() is the second lifecycle hook in LWC.
- It is automatically triggered when a LWC component is inserted into the DOM.
- connectedCallback() can be used to:
- fetch data from an API
- to Subscribe to an event or messaging channels
- to set up timers or intervals.
- The hook flows from Parent component to Child component.
- By the time connectedCallback is called, the component’s DOM structure is available.
So, from connectedCallback() you can access and interact with any DOM elements. - connectedCallback will be triggered automatically when a component is removed or re-added to the DOM.
- You cannot access child elements from connectedCallback().
Example:
connectedCallback() {
console.log('connectedCallback called');
// Fetch data or set up subscriptions
this.fetchData();
}
Checkout the post below to learn more about connectedCallback() Lifecycle hook in LWC, complete with examples.
3. renderedCallback()
- renderedCallback() lifecycle hook is called when you want to perform some logic or manipulate the DOM after a component has finished rendering or re-rendering.
- It is used for performing logic after a component has finished the rendering phase.
- Ideally renderedCallback() is used for all those tasks that requires the DOM to be fully updated.
- The hook flows from Child component to Parent component.
- This hook should be used cautiously so that an infinite rendering loop is not triggered since this hook is called after the component gets rendered every time.
Example:
renderedCallback() {
console.log('renderedCallback called');
// Perform DOM manipulation here
const element = this.template.querySelector('.my-element');
if (element) {
element.style.color = 'red';
}
}
Checkout the post below to learn more about renderedCallback() Lifecycle hook in LWC, complete with examples.
4. disconnectedCallback()
- disconnectedCallback is invoked – when the component is removed from the DOM.
- It is used to clean up resources such as event listeners or to unsubscribe from services to prevent memory leaks.
- The hook flows from parent component to child component.
- While you can access component-level properties, the DOM is no longer guaranteed to be available for interaction.
Example:
disconnectedCallback() {
console.log('disconnectedCallback called');
// Unsubscribe or clean up resources
this.cleanUpResources();
}
Checkout the post below to learn more about disconnectedCallback() Lifecycle hook in LWC, complete with examples.
5. errorCallback (error, stack)
errorCallback() lifecycle hook is called whenever an unhandled error occurs in the component itself or any child component within its tree.
errorCallback() allows developers to capture the error details, log them, and display user-friendly error messages or alternative content.
This hook does not automatically update the UI; you must explicitly handle it (e.g., by displaying an error message).
Example:
errorCallback(error, stack) {
console.error('Error occurred:', error);
console.error('Stack trace:', stack);
// Notify user about the error or log it for debugging
}
Checkout the post below to learn more about errorCallback() Lifecycle hook in LWC, complete with examples.
Complete Example
Here’s a complete example of an LWC component utilizing lifecycle hooks:
<template>
<div class="container">
<h1 id="lwc-lifecycle-hooks-demo" class="rb-heading-index-14">LWC Lifecycle Hooks Demo</h1>
<div class="my-element">Watch this text turn red!</div>
</div>
</template>
import { LightningElement } from 'lwc';
export default class LifecycleDemo extends LightningElement {
// Constructor: Initialize variables
constructor() {
super();
console.log('constructor: Component is being created');
this.message = 'Hello, Lifecycle Hooks!';
}
// ConnectedCallback: Perform initialization
connectedCallback() {
console.log('connectedCallback: Component is inserted into the DOM');
this.fetchData();
}
// RenderedCallback: Manipulate DOM
renderedCallback() {
console.log('renderedCallback: DOM is rendered');
const element = this.template.querySelector('.my-element');
if (element) {
element.style.color = 'red';
}
}
// DisconnectedCallback: Clean up resources
disconnectedCallback() {
console.log('disconnectedCallback: Component is removed from the DOM');
this.cleanUpResources();
}
// ErrorCallback: Handle errors
errorCallback(error, stack) {
console.error('errorCallback: Error encountered');
console.error(error, stack);
}
fetchData() {
console.log('Fetching data...');
// Simulate data fetch
}
cleanUpResources() {
console.log('Cleaning up resources...');
}
}
Best Practices for Using Lifecycle Hooks
- Use hooks judiciously: Avoid adding unnecessary logic that could slow down the component.
- Avoid modifying state in renderedCallback: This could lead to infinite re-renders.
- Clean up resources: Always use disconnectedCallback to release resources like timers or event listeners.
- Gracefully handle errors: Use errorCallback to catch and log issues
