Introduction
‘renderedCallback’ lifecycle hook is called when you want to perform some logic or manipulate the DOM after a component has finished rendering or re-rendering.
It is a powerful hook for all those tasks – that require the DOM to be fully updated, making it ideal for handling post-render actions
Here’s a detailed explanation of its role:
Role and Properties of renderedCallack():
1. Triggered Automatically After Every Render
The renderedCallback is called:
- After the component is initially rendered.
- Every time the component re-renders due to changes in tracked properties or data.
Example:
renderedCallback() {
console.log('Component rendered or updated');
}
2. Useful for Post-Render Logic
This hook is ideal for tasks that require the final DOM structure to be available, such as:
- Applying custom styling to DOM elements.
- Measuring DOM element dimensions.
- Running animations or initializing third-party libraries.
Example:
renderedCallback() {
const button = this.template.querySelector('button');
if (button) {
button.style.backgroundColor = 'blue';
}
}
3. Avoid Heavy Logic
Since renderedCallback runs after every render, avoid placing heavy computations or frequent updates here.
Doing so can slow down performance and lead to recursive rendering issues.
4. Avoid Infinite Loops
This hook should be used cautiously so that an infinite rendering loop is not triggered since this hook is called after the component gets rendered every time.
Note: Reactive property in renderedCallback() should be avoided, as it leads to infinite loop.
Example:
renderedCallback() {
this.someProperty = 'new value'; // This can cause infinite rendering loops.
}
5. Use Flags to Control Execution
If you need renderedCallback to run only once or under specific conditions, use a flag to control execution.
Note: If you want to track whether renderedCallback() has been executed or not, make sure to use a private boolean property like ‘isRendered’.
Example:
hasRendered = false;
renderedCallback() {
if (this.hasRendered) return;
console.log('This will run only once after the first render');
this.hasRendered = true;
}
6. Ideal for DOM Manipulation
The renderedCallback is the only hook where you can safely perform operations on the DOM that depend on its final layout.
Example:
renderedCallback() {
const element = this.template.querySelector('.my-element');
if (element) {
element.textContent = 'DOM is ready!';
}
}
When to use renderedCallback?
- To make adjustments or modifications to the DOM after it is fully rendered.
- To initialize third-party libraries or plugins that require the DOM.
- To measure DOM elements for layout calculations.
Key Points
- ‘renderedCallback’ runs after every render or re-render.
- Avoid making changes to properties or state directly in this hook to prevent infinite loops.
- Use it for tasks that requires the DOM to be fully updated.
- It’s a crucial hook for post-render adjustments and third-party integrations.
Explore the post below to learn about the five different lifecycle hooks in LWC.
Example
HTML (renderedCallbackDemo.html):
<template>
<div class="my-element">Hello, RenderedCallback!</div>
</template>
JavaScript (renderedCallbackDemo.js):
import { LightningElement } from 'lwc';
export default class RenderedCallbackDemo extends LightningElement {
renderedCallback() {
const element = this.template.querySelector('.my-element');
if (element) {
element.style.color = 'green';
console.log('RenderedCallback executed: DOM updated');
}
}
}
Checkout below posts to explore other Lifecycle hooks in LWC in detail
