6

I'm new to Salesforce LWC. I'm trying to understand the LWC component life cycle methods. But it is a bit difficult to understand. Can any give a simple explanation about connectedcallback() and renderedcallback() methods with simple example in LWC?

12

connectedcallback()

The connected callback is executed when the component is inserted into DOM. Connected callback runs once when the component is inserted. If you know aura components then this is similar to aura init handler.

The connectedCallback() hook can fire more than once. For example, if you remove an element and then insert it into another position, such as when you reorder a list, the hook fires several times. If you want code to run one time, write code to prevent it from running twice.

We generally use it when we need to do something when the component is loaded. For eg. query some data when the component is loaded.

The execution flow of connectedCallback is parent to child. So you cannot access child elements in the connectedCallback, because they are not inserted yet.

Example:

parentComponent.js

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

childComponent.js

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

parentComponent.html

<c-parent-component>
   <c-child-component></c-child-component>
</c-parent-component>

If we run the above code, then the console logs will be like below:

parent inserted
child inserted

renderedcallback()

This gets called when the component is rendered. Basically when all the elements on the component are inserted.

A component is rerendered when the value of a property changes and that property is used either directly in a component template or indirectly in the getter of a property that is used in a template. See Reactivity.

The meaning of above statement from the docs is that, the component is rerendered when any reactive property is changed. For. eg. The property with @track, @api, @wire, with getter setter and any premitive property which is member of component class. The component reevaluate all the expression based on the new data in the reactive properties.

Most common example of renderedCallback() is that we use to load the static resources.(write code to prevent it from running twice).

The execution flow of renderedcallback is child to parent, means the renderedcallback of all childs are called before the parent's.


Points to remember:

  • The connectedCallback() hook can fire more than once. For example, if you remove an element and then insert it into another position. If you want code to run one time, write code to prevent it from running twice
  • Child components are not available in the connectedCallback().
  • Don’t update a wire adapter configuration object property in renderedCallback()
  • Don’t update a public property or field in renderedCallback()

There are other nuances which you can find in the below mentioned links.

Important References

Run Code When a Component Is Inserted or Removed from the DOM
Run Code When a Component Renders
Lifecycle Flow

5
  • Can you provide an example when connected callback runs more than once? – Michael Munta Feb 18 at 10:49
  • @MichaelMunta If you have a sub-component that is shown/hidden based on if:true={condition} then the connectedCallback is called every time the component is made visible. Similarly the disconnectedCallback is called every time component is hidden. – Rahul Gawale Feb 18 at 13:34
  • @MichaelMunta Here is the live example, toggle the Show box and check the console logs. – Rahul Gawale Feb 18 at 13:42
  • Oh, I thought that the hook would fire on the parent as well because it sounded like a warning. But in essence it only fires once each time the component is added to the DOM? – Michael Munta Feb 18 at 13:49
  • @MichaelMunta yes correct each time the component is added and reordered. – Rahul Gawale Feb 18 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.