render() and renderedCallback() in LWC

render()

This function used for conditional rendering and use to override the standard rendering functionality. This function get called before and after connectedCallback().

render() must return a valid HTML template.

render() method is not part of lifecycle hook but its a protected method on the LightningElement class. A hook usually tells you that something happened, and it may or may not exist on the prototype chain. The render() method must exist on the prototype chain.

 renderedCallback()

renderedCallback() method is called after render() method. This method called after every render of the component. This hook flows from child to parent. This method called after every render of the component, so you need to be careful, if you want to perform some operation is specific conditions like performing one time operation, use a private boolean property like hasRendered to track whether renderedCallback() has been executed.

/* libsChartjs.js */

import { LightningElement } from ‘lwc’;
// eslint-disable-next-line no-unused-vars
const generateRandomNumber = () => {
    return Math.round(Math.random() * 100);
};
export default class LibsChartjs extends LightningElement {
    chart;
    chartjsInitialized = false;
    config = {
      // Code removed for brevity
    };
    renderedCallback() {
        if (this.chartjsInitialized) {
            return;
        }
        this.chartjsInitialized = true;
        this.loadChartJs();
    }
    async loadChartJs() {
        await require(/* webpackChunkName: “chartJs” */ ‘chart.js’);
        const ctx = this.template
            .querySelector(‘canvas.donut’)
            .getContext(‘2d’);
        this.chart = new window.Chart(ctx, this.config);
    }
}

 

constructor in Lightning Web Component

Constructor() method fires when a component instance is created.

The constructor in LWC flows from parent to child which means Constructor of Parent component will get called first if you have parent child component composition.

Child Component and Controller –

childComp .html

<template>
<lightning-card title=“Child Component”>
<div class=“slds-p-left_medium slds-align_absolute-center”>
                Child Component Called
</div>
</lightning-card>
</template>
childComp.js
import { LightningElement } from ‘lwc’;
export default class childComp extends LightningElement {
    pChildList = [];
    constructor() {
        super();
        window.console.log(‘::: In Child Constructor’);
    }
    connectedCallback() {
        this.pChildList.push(‘Add Child connectedCallback’);
        window.console.log(‘::: In Child connectedCallback’);
        window.console.log(‘::: List values => ‘+ this.pChildList);
    }
}

Parent Component and Controller –

webCompLifeCycl.html

<template>
<lightning-cardtitle=“Parent Component”>
<c-child-comp></c-child-comp><br/>
<divclass=“slds-p-left_medium”>
                Page LOAD
</div>
</lightning-card>
</template>
webCompLifeCycl.js
import { LightningElement } from‘lwc’;
exportdefault class webCompLifeCycle extends LightningElement {
pList = [];
constructor() {
super();
window.console.log(‘::: In Constructor’);
    }
connectedCallback() {
this.pList.push(‘Add connectedCallback’);
window.console.log(‘::: In connectedCallback’);
window.console.log(‘::: List values => ‘+this.pList);
    }
}
Output –
LWC_Contstructor
NOTES –
  • The first statement must be super() with no parameters. This call establishes the correct prototype chain and value for this. Always call super() before touching this.
  • Don’t use a return statement inside the constructor body, unless it is a simple early-return (return or return this).
  • Don’t inspect the element’s attributes and children, because they don’t exist yet.
  • Don’t inspect the element’s public properties, because they’re set after the component is created.