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():
- The constructor() method fires when a component or its instance is created.
- The constructor flows from parent to child.
- 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.
- Syntax:
constructor() {
super();
console.log('constructor');
}
2.connectedCallback():
- This method is called when a component is inserted into the DOM.
- These hooks flow from parent to child. You can’t access child elements from the callbacks because they don’t exist yet.
- 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():
- This method is called when a component is removed from the DOM.
- 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.
- This lifecycle hook runs after the first `connectedCallback()` and whenever the component rerenders.
- Avoid adding code that could change the component, because it might trigger another `renderedCallback()`.
- 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)
- This lifecycle hook is called when a descendant component throws an error in one of its lifecycle hooks.
- It receives the error and the stack trace as parameters.
- It creates an error boundary component that captures errors
- It captures errors that occur in the descendant’s lifecycle hooks or during an event handler declared in an HTML template.
- 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.