8Mar, 2024
Lifecycle Hooks In LWC: Best Practices And Tips

Lifecycle hooks in LWC are predefined special methods that are called to get involved at different stages of a component’s journey/lifecycle.

In LWC, the following lifecycle hooks are available:

 1.constructor():

  1. The constructor() method fires when a component or its instance is created.
  2. The constructor flows from parent to child.
  3. This method is called when a component is created, but before it’s inserted into the DOM. It’s a good place to set initial state and default values and to set up event listeners.
  4. Syntax:
				
					constructor() {
        super();
        console.log('constructor');
    }

2.connectedCallback(): 

  1. This method is called when a component is inserted into the DOM. 
  2. These hooks flow from parent to child. You can’t access child elements from the callbacks because they don’t exist yet.
  3. It can fire more than one time.

  It’s a good place to perform setup work that requires interaction with the DOM API, such as fetching data or setting up a third-party library.

3.disconnectedCallback():

  1. This method is called when a component is removed from the DOM.
  2. It flows from parent to child. We can’t access child elements from the callbacks because they don’t exist yet.

  It’s a good place to perform cleanup work. Use disconnectedCallback() to clean up work done in the connectedCallback(), like purging caches or removing event listeners.

4.renderedCallback():

This is called after every render of the component.

  1. This lifecycle hook runs after the first `connectedCallback()` and whenever the component rerenders.
  2. Avoid adding code that could change the component, because it might trigger another `renderedCallback()`.
  3. Use
    • We can set the properties but Use getters and setters instead.
    • We can access the elements owned by component.
    • We can call an apex method inside the renderedcallback() method.
    • We can create and dispatch custom events from method.
    • We can make call to uiRecordApi inside the method Salesforce.

5.error Callback(error, stack)

  1. This lifecycle hook is called when a descendant component throws an error in one of its lifecycle hooks.
  2. It receives the error and the stack trace as parameters.
  3. It creates an error boundary component that captures errors
  4. It captures errors that occur in the descendant’s lifecycle hooks or during an event handler declared in an HTML template.
  5. The error argument is a JavaScript native error object, and the stack argument is a string.

Here’s an example of how these might be used in a component:

				
					import { LightningElement } from 'lwc';

export default class LifecycleDemo extends LightningElement {
    constructor() {
        super();
        console.log('constructor');
    }

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

    disconnectedCallback() {
        console.log('disconnectedCallback');
    }

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

    errorCallback(error, stack) {
        console.log('errorCallback');
    }
}

In this example, each lifecycle hook just logs a message to the console when it’s called. In a real component, you’d replace these with your own implementation.