Lifecycle Hooks in LWC & Basic Demo | Peoplewoo Skills

List of Lifecycle Hooks in LWC

1. constructor()

The first hook executed when an LWC component instance is created. Best used for initializing basic variables.

 constructor() {     super();     console.log('Constructor called!'); } 

Restrictions: You cannot access DOM elements here.

2. connectedCallback()

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

• Call Apex methods
• Initialize data
• Register event listeners

 connectedCallback() {     console.log('Component loaded in DOM'); } 

3. renderedCallback()

Executes every time the component renders or re-renders. Use this for DOM manipulation.

 renderedCallback() {     console.log('Component rendered!'); } 

Note: It may run multiple times, so avoid heavy logic here.

4. disconnectedCallback()

Triggered when a component is removed from the DOM. Used for cleanup work.

 disconnectedCallback() {     console.log('Component removed!'); } 

Examples of cleanup:

• Removing event listeners
• Clearing timers
• Unsubscribing from events

5. errorCallback(error, stack)

Captures errors from child components.

 errorCallback(error, stack) {     console.error('Error:', error);   

  console.log('Stack:', stack); } 

Basic Demo of Lifecycle Hooks

Below is a simple LWC example demonstrating all lifecycle hooks:

 import { LightningElement } from 'lwc'; export default class LifecycleDemo

 extends LightningElement {     constructor() {         super();       

  console.log('Constructor executed');     }     connectedCallback() 

{         console.log('connectedCallback executed');     }     

renderedCallback() {         console.log('renderedCallback executed'); 

    }     disconnectedCallback() {        

 console.log('disconnectedCallback executed');     } 

    errorCallback(error, stack)

 {         console.log('Error caught:', error);     } } 

Real-Life Use Case

Example: Fetching Account data when the component loads

Developers often use connectedCallback() to fetch Apex data as soon as the component appears on the screen.

 connectedCallback() {     getAccountList()         .then(result => 

{             this.accounts = result;         })         .catch(error => 

{             console.error(error);         }); } 

This ensures the data loads before the user interacts with the component.

Best Practices

• Use constructor only for variable initialization
• Use connectedCallback for data fetching and event registration
• Avoid heavy logic inside renderedCallback
• Always clean up listeners in disconnectedCallback
• Use errorCallback for debugging child components