Life cycle hooks in lightning web component

Sept 27, 2023

What is life cycle hooks

Life cycle hook is callback method which fired / run at specific phase of component.

You will learn in this section

1. constructor()

2. connectedCallback()

3. renderedCallback()

4. render()

5. disconnectedCallback()

6. errorCallback()

1. constructor()

This lifecycle hook called when component in created. The constructor() hook flow from parent to child, which mean it will run first in parent componet. In constructor first statement must be super() method which will not contain any parameters and don't use return or return this statement in the body of contstructor. And also don't use document.write(), document.open() methods and don't instpect elements attribute and children and public properties becuase they are not exist yet. They are set when component is created.

2. connectedCallback()

This life cycle hook is called when component in inserted into DOM and remove from DOM. The connectedCallback() hook flow from parent to child. You can not access child elements from the callbacks because they does not exist yet. The connectedCallback() hook use to passing a initial properties to the component. This life cycle hook established communictaion with current document, container behavior with the environment. This component use to initialize the task, fetch data, set up cache and listen events. You also subscribe or unsubscrible message channel.

If a component derives its internal state from the properties, it's better to write the logic in a setter than in connectedCallback(). StackExchange Post by Salesforce engineer, Pierre-Marie Dartus.

Note: To check whether a component is connected to the DOM, you can use this.isConnected.

3. renderedCallback()

This componet called after every render of the component. This life cycle hook from child to parent. The renderedCallback() hook component rerender when value of properties changes, and it observes changes to the values of fields and properties. When it observes a change, it reacts. It reevaluates all the expressions used in the template and rerenders the component, which displays the new values.

With rerenderCallback() you can compute size of node. Perform tasks not covered by our template declarative syntax, such as add a listener for a non-standard event from a component’s child.

Update the state of component in rerenderCallback() can cause of infinite loop.

We can not update a wire adapter configuration object property in renderedCallback(). update a public property or field in renderedCallback().

4. render()

This component may be called after and before connectedCallback(). The render() hook is use to update UI. The main use is to conditionally render the template. Define a business logic to decide which template(HTML file) should render to use.

5. disconnectedCallback()

This component called when component removed from DOM. The disconnectedCallback() hook flow from parent to child. This component use to what things should be happen before removed component from DOM. Like clear cache, listen some events.

6. errorCallback(error, stack)

This life cycle hook called when decendent component throws an error. The errorCallback() hook have two arguments, First arguments is a javascript native error object. The second argument is string. The errorCallback() is unique to Lightning Web Components This method like javascript catch{} block for component that throw error in their life cycle.