Life Cycle Of A Lightning Web Components

/ apex, Salesforce / By

Since the Lightning Web Component is constructed on a component-based framework, it is crucial for us to comprehend the life cycle events of a component to enhance the development of superior components.

The Lightning Web Component is constructed upon a component-based framework, underscoring the importance of comprehending the life cycle events of a component to facilitate the development of superior components.

Let’s delve into a couple of components and systematically understand the unfolding of events. Presented below is the template file.

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

And here is the corresponding 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, let’s outline the sequential occurrences when a page is loaded, specifically a record page embedding <c-store-front></c-store-front>.

  • An instance of the StoreFront component is created, triggering the invocation of its constructor (ensure not to overlook the super() call in the constructor).
  • If the component possesses any @api enabled properties, they are assigned data.
  • The StoreFront component establishes a connection with the main DOM.
  • The connectedCallback() in the StoreFront component is triggered.
  • The StoreFront component is rendered (note that the renderedCallback() is not invoked at this stage).
  • A check is conducted to determine if there are any child components; if present, the constructor of that component will be invoked – in this case, it’s the Cake component.
  • If the Cake component has any @api enabled properties, they are assigned data.
  • The Cake component establishes a connection with the DOM.
  • The connectedCallback() in the Cake component is invoked.
  • The Cake component is completely rendered.
  • The Cake component’s rendering invokes the associated renderedCallback() life cycle hook.
  • Upon completion, it retraces the same route taken to arrive here, triggering the renderedCallback() of the StoreFront component.
  • The Chrome browser console logs provide a visual confirmation of these actions.

Related Posts