Life Cycle of a Lightning Web Components

Lightning Web Component is built on a component-based framework, it's extremely important that we understand the Life Cycle events of a Component to build better components.

Let's take a couple of components and understand what happens steps by step.

Here is the template file.

//storeFront.html
<template>
	<c-cake><c-cake>
</template>

And this is the associated controller file storeFront.js.

import { LightningElement, api } from 'lwc'

export default class StoreFront extends LightningElement{

  @api
  recordId;
  
  constructor() {
    super();
    console.log("Am IN StoreFront CONSTRUCTOR!!!");
  }

  connectedCallback() {
    console.log("Am IN StoreFront CONNECTED CALLBACK !!!");
  }

  renderedCallback() {
    console.log("Am IN StoreFront RENDERED CALLBACK !!!");
  }

  disconnectedCallback() {
    console.log("Am IN StoreFront DISCONNECTED CALLBACK !!!");
  }

  errorCallback() {
    console.log("Am IN StoreFront ERROR CALLBACK !!!");
  }
}

Regarding the child component here it is.

<template>
	<p>This is CAKE COMPONENT!!!</p>
</template>

Last, here is the controller.js file

import { LightningElement, api } from 'lwc'

export default class Cake extends LightningElement{
  @api
  recordId

  constructor() {
    super();
    console.log("Am IN Cake CONSTRUCTOR!!!");
  }

  connectedCallback() {
    console.log("Am IN Cake CONNECTED CALLBACK !!!");
  }

  renderedCallback() {
    console.log("Am IN Cake RENDERED CALLBACK !!!");
  }

  disconnectedCallback() {
    console.log("Am IN Cake DISCONNECTED CALLBACK !!!");
  }

  errorCallback() {
    console.log("Am IN Cake ERROR CALLBACK !!!");
  }
}

Now, here are the things that happen in sequential order when a page is loaded, let's say a record page which has <c-store-front></c-store-front> embedded in it.

1. An instance of StoreFront component is created, hence, the constructor is invoked (make sure you don't miss out on the super() in the constructor()).
2. If the component has any @api enabled properties, they will be assigned data.
3. StoreFront component is connected to the main DOM.
4. The connectedCallback() in StoreFront is invoked.
5. StoreFront component is rendered (It is not going to invoke renderedCallback())
6. A check is performed to see if there are any child components, if it exists, the constructor of that component will be invoked which is going to be Cake component in this case.
7. If Cake component has any @api enabled properties, they will be assigned data.
8. Cake component is connected to DOM.
9. The connectedCallback() in Cake is invoked.
10. Cake Component is rendered completely.
11. Cake component is rendered and the associated renderedCallback() life cycle hook is invoked.
12. Once it's completed, it takes the same route it took to arrive here. The renderedCallback() of the StoreFront is invoked.

Here are the console logs in chrome browser that gives us a visual confirmation regarding the same.