How do lifecycle hooks work in lightning web components? Lightning web components have a lifecycle managed by the framework. When lightning web component instance is created it goes through a lifecycle phase. During specific phases, a lifecycle hook fires triggering a particular callback method. Each callback method has it’s specific use and has things you can and cannot do.

Overall framework basically can do the following.

• create the component
• insert the component into the DOM
• renders the component
• removes component from the DOM
• monitors component for property changes

This the Lifecycle Flow diagram flow – it shows the flow of the component lifecycle from creation through render.

Starts with parent component creation, insertion to the DOM, render and child component creation, insertion to the DOM and render. Finally child calls renderedCallback and then calls the parent’s renderedCallback.

What is the constructor() method lifecycle hook?

• this method fires when a component instance is created.
• constructor flows from parent to child

Do’s and Don’ts

• do have the first statement always super() with no paremeters. This call enables the correct prototype chain.
• don’t use return statement inside the constructor
• don’t use document.write or document.open methods
• don’t add element attributes to the host element during construction
• don’t inspect element attritubes or child attributes as they don’t exist yet
• don’t inspect the public properties as component hasn’t been set

Example lifecyclehookParentDemo.js and lifecyclehookParentDemo.html:

Browser output :

Car Model : Mercedes Benz

What is the connectedCallback() and disconnectedCallback() lifecycle hook?

• connectedCallback lifecycle hook fires when the component is inserted in the DOM.
• disconnectedCallback lifecycle hook fires when the component is removed from the DOM.
• both connectedCallback and disconnectedCallback hooks flow from parent to child
• use disconnectedCallback() to clean up work done in the connectedCallback(), like purging caches or removing event listeners.

connectedCallback() method Do’s and Don’ts

• don’t access child elements from this callback as they aren’t created yet.
• do use connectedCallback when we want to establish communication with the current document or container and coordinate behaviour with the environment
• do access the host element, using the this keyword
• do use connectedCallback when we want perform initialization task, such as fetch date, setup cache or listen for events
• do use connectedCallback when we want subscribe/unsubsribe to message channel
• don’t use connectedCallback() to change the state of a component, such as loading values or setting properties. Use getters and setters instead.

Note: From the documentation it mentions to access elements in a component’s template use this.template. I found this to always return null when used in connectedCallback() as the component hasn’t been rendered yet. Instead, I access the component’s template using the renderedCallback() method.

Let’s update sample lifecyclehoook.js to include the connectedCallback(), update the public property already initialized from the constructor earlier and also try accessing the component template using this.template

Example lifecyclehookParentDemo.js

Browser Output:

Car Model : BMW

Console Output:

What is the renderedCallback() method?

This method is called after every render of the component. This is specific to LWC only and not from the HTML custom elements specification. It flows from child to parent.

This method can fire multiple times, it can be from a property change and it is used in the component template or via getter property used in the template.

Do’s and Don’t

• Do not update wire or api public property as this can cause an infinited loop
• Do make a @track property to track manually if renderedCallback has already fired. You can use this logic to make sure you’re logic only execute once
• Do use the interact with the component’s UI
  • You can inspect element attributes
  • You can add element attributes