Tip of the week # 208 : Lifecycle hooks in LWC

Lifecycle hooks in Lightning Web Components (LWC)

Description : In Lightning Web Components (LWC), lifecycle hooks are special methods that allow you to run code at specific points during a component's lifecycle — such as when it is created, inserted into the DOM, or removed or when reactive variables are changed.

---

• constructor() : Called when the component instance is created (before rendering or attaching to the DOM).

  
      
  		import { LightningElement } from 'lwc';
  
  		export default class LifcCyclehook extends LightningElement {
      			constructor() {
          			super(); // always call super() for calling parent class constructor i.e LightningElement
          			console.log('Constructor called');
      			}
  		}
          
          
  
      
  	
  	

  Ideal for below used :
  Initialize default values for private properties but not for public properties.

• connectedCallback() : Called when the component is inserted into the DOM.

  
      
  		import { LightningElement } from 'lwc';
  
  		export default class LifcCyclehook extends LightningElement {
      		connectedCallback() {
      			console.log('Component inserted in DOM'); 
  			}
  		}
         
  
      
  	
  	

  Ideal for below used :
  Perform initialization tasks, such as fetch data via Apex, set up caches, Loading scripts/styles or listen for events

• renderedCallback() : Called after the component is rendered or re-rendered(every time rendering happens).

  
      
  		import { LightningElement } from 'lwc';
  
  		export default class LifcCyclehook extends LightningElement {
      		renderedCallback() {
      			console.log('Component rendered/re-rendered');
  			}
  		}
          
  
      
  	
  	

  Ideal for below used :
  DOM measurements or interacting with rendered elements like reinitialize loadScript method or third-party UI plugins

• disconnectedCallback() : Called when the component is removed from the DOM.

  
      
  		import { LightningElement } from 'lwc';
  
  		export default class LifcCyclehook extends LightningElement {
      		disconnectedCallback() {
      			console.log('Component removed from DOM');
  			}
  		}
          
  
      
  	
  	

  Ideal for below used :
  Use for clean up resources like timers or event listeners.

• errorCallback(error, stack) : Called when an error is thrown in a descendant component.

  
      
  		import { LightningElement } from 'lwc';
  
  		export default class LifcCyclehook extends LightningElement {
      		errorCallback(error, stack) {
      			console.error('Error captured:', error);
      			console.error('Stack trace:', stack);
  			}
  		}
  		
      
  	
  	

  Ideal for below used :
  Useful for centralized error handling and log or display user-friendly error messages.
• 

• Tip and Note :

  1. Avoid placing heavy logic in renderedCallback as it can be called multiple times.
  2. Always use super() in the constructor.
  3. Use flags if you want renderedCallback to run only once:
  

  
      
  		rendered = false;
  
  		renderedCallback() {
      		if (this.rendered) return;
      			this.rendered = true;
      			console.log('Rendered for the first time only');
  		}
  		
      
  	
  	

Happy Sharing...

Everyone has their own favorites, so please feel free to share with yours contacts and comments below for any type of help!

Use below Chrome Extension for Productivity and share your feedback. Download Link : https://chromewebstore.google.com/detail/quick-shortcuts/ldodfklenhficdgllchmlcldbpeidifp?utm_source=ext_app_menu