connectedcallback vs renderedcallback in lightning web component

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