Life Cycle Hooks – render(), renderedCallback() & errorCallback() in LWC : jayakrishnasfdc

Reader
December 06, 2020
1
Life Cycle Hooks – render(), renderedCallback() & errorCallback() in LWC
by: jayakrishnasfdc
blow post content copied from  Jayakrishna Ganjikunta
click here to view original post

render()

Render is mainly used to conditionally render a template. It defines the business logic to decide which template (HTML file) to use.

Enter the render() method

In LWC this method doesn’t do the actual rendering, but determines what template to use to render the component.

There are a few simple points:

  • We need to import the template into the JavaScript file
  • The call to return must return the imported variable

renderedCallback()

renderedCallback() is unique to Lightning Web Component. DOM is created after the connectedCallback and before the renderedCallback. renderedCallback() method is called after render() method.

This method is invoked when component is completely rendered,Basically when all the elements on the component are inserted. This method called is after every render of the component. This hook flows from child to parent.

As this method called after every render of the component, so we need to be careful, if we 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.

errorCallback()

  • It Captures errors that may happen in all the child components lifecycle hooks
  • This method is unique to LWC
  • It has two parameters error and stack.The error argument is a JavaScript native error object, and the stack argument is a string.
  • Error in parent shows in UI no boundary component for it. This means if there is error in child then parent handles the error but if there is error in parent then it is shown in the UI.
  • This method works like a Javascript catch() block for catching errors

Example:

parentComp.html

<template>
 <lightning-card title=”Demo of render()in lifecycle hook”> 
This is template 1        
<br/> <br/>        
<lightning-button  label=”Go to the  template 2″  onclick={onchange}> 
       </lightning-button>
</lightning-card>
</template>

childComp.html (create in same folder)
<template>
    <div> this is template 2</div>
</template>

parentComp.js

import { LightningElement } from ‘lwc’;
import firsttemplate from ‘./parentComp.html’;
import secondtemplate from ‘./childComp.html’;
export default class ParentComp extends LightningElement {
templatenumber = ‘temp1’;
constructor(){
super();
console.log(‘Inside constructor’);
}
connectedCallback(){
console.log(‘Inside connected callback’);
}
disconnectedCallback(){
console.log(‘Inside disconnected callback’);
}
onchange(){
console.log(‘Inside change template’);
if(this.templatenumber===’temp1′){
this.templatenumber=’temp2′;

}else{
this.templatenumber=’temp1′;
}
}
render(){
console.log(‘Inside render’);
if(this.templatenumber===’temp1′)
return firsttemplate;
else return secondtemplate;
}
}

Output:

Click on the button ‘Go to the template 2’

Now Lets add renderedCallback()

create one ChildComponent.html

<template> 
   <lightning-card title=”Demo of renderCallback()in lifecycle hook”>
</lightning-card> 
   <div>        I am from child component    </div>
</template>

ChildComponent.js

import { LightningElement } from ‘lwc’;
export default class Childcomponent extends LightningElement { 
   renderedCallback()    {  
      console.log(‘This is From child component rendered callback’); 
   }
}

and update parentComp.html to

<template>
    <lightning-card title=”Demo of render()in lifecycle hook”>
        This is template 1        <br/> <br/> 
       <lightning-button         label=”Go to the  template 2″         onclick={onchange}> 
       </lightning-button>
</lightning-card>
<c-child-Component></c-child-Component>
</template>

Output:

Now Lets add errorCallback()

update ChildComponent.js to

import { LightningElement } from ‘lwc’;
export default class Childcomponent extends LightningElement {
    renderedCallback()    { 
       console.log(‘This is From child component rendered callback’);
    }   
 errorCallback(error, stack){       
 console.log(‘errorcallback – child’ + error );     
   console.log(stack); 
   }}

This method works like a JavaScript catch{} block for catching errors.


December 06, 2020 at 04:09PM
Click here for more details...

=============================
The original post is available in Jayakrishna Ganjikunta by jayakrishnasfdc
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================

Salesforce