How to use renderedCallback
LWC have dedicated renderedCallback lifecycle hook, which fires when component has finished rendering phase. It’s very useful, but can be dangerous when used incompetently.
How to use renderedCallback
LWC have dedicated renderedCallback lifecycle hook, which fires when component has finished rendering phase. It’s very useful, but can be dangerous when used incompetently.
import { LightningElement } from 'lwc';
export default class RenderedCallback extends LightningElement {
renderedCallback() {
}
}It’s crucial to understand phrase “when component has finished rendering phase”. There are multiple rendering cycles - every time when single variable changes on the template, the rendering cycle starts all over again - so renderedCallback will be called.
<template>
<div>
<span>{number}</span>
</div>
<div>
<lightning-button label="Click" onclick={handleClick}></lightning-button>
</div>
</template>import { LightningElement } from 'lwc';
export default class RenderedCallback extends LightningElement {
number = 0;
handleClick() {
this.number++;
}
renderedCallback() {
console.log('fired rendered callback because number variable got increased');
}
}So you must be prepared to avoid the infinite loops - especially, when you’re updating something in renderedCallback.
<template>
<span>{number}</span>
</template>import { LightningElement } from 'lwc';
export default class RenderedCallback extends LightningElement {
number = 0;
renderedCallback() {
this.number++;
}
}This example will cause the infinite loop.
Always keep you code clean - functions should be named properly and when you’re using renderedCallback - remember about simple boolean flag to avoid execution of same code over and over again or stepping into infinite loop.
import { LightningElement } from 'lwc';
export default class RenderedCallback extends LightningElement {
number = 0;
hasRendered = false;
handleClick() {
this.number++;
}
renderedCallback() {
if (this.hasRendered) {
return;
}
// load external libraries
// call functions
// set the flag on the end
this.hasRendered = true;
}
}
