Render method in LWC Example

In this Salesforce Lightning tutorial, we will learn about Render method in LWC with an example. So what is Render method in LWC? How we use Render( ) method in Lightning Web Component? Check the following.

render method in LWC

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;
}
}
image 24

Click on the button ‘Go to the template 2’

image 26

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:

image 29

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.