Different Rendering Behavior Of Lightning Component

Hi All,

In this article I will tell you how and when you can use/customize different Renderer.js functions of a Lightning Component. There are different types of renderer functions which are called automatically when a Component is Render, Rerender or Unrender. You can customize these functions to change default rendering behaviour of Component.

Let’s explore these functions.

Render

The framework calls render() function when component is being initialized/rendered. The render() function typically returns a DOM node, an array of DOM nodes, or nothing. The base HTML component expects DOM nodes when it renders a component. Use render function to modify DOM or to modify component markup.

//Component1.cmp
<aura:component>
	<aura:attribute name="msg" type="String"></aura:attribute>
	<div><b>{!v.msg}</b></div>
</aura:component>

//Component1Helper.js
({
	changeValue : function(component) {
		component.set("v.msg","Changed value before Render");
	},
})

//Component1Renderer.js
({
	render: function(cmp, helper) {
	   console.log('render');
	   helper.changeValue(cmp);
	   return this.superRender()
	},
})

In render() function I am calling helper method to modify DOM when component renders.

AfterRender

The afterRender function will be called by framework after render() function.AfterRender function allows us to further change an already rendered component. The afterRender() function enables you to interact with the DOM tree after the framework’s rendering service has inserted DOM elements.

Note :

1. Both the functions will be called only once, you can keep your business logic that needs to run only once in these functions.
2. Both functions can be used to modify DOM or markup.
3. Don’t perform DML in render function. You can do in afterRender.

Rerender

Rerender function will be called when a component’s value changes due to user action like a button click or some other event like component/application event. Rerender function updates component upon rerendering of the component.

//Component1.cmp
<aura:component>
	<aura:attribute name="truthy" type="Boolean"></aura:attribute>
	
	<aura:if isTrue="{!v.truthy}">
		True
	<aura:set attribute="else">
		False
	</aura:set>
	</aura:if>
	<ui:button aura:id="button" label="Check" press="{!c.update}"/>
</aura:component>

//Component1Controller.js
({
	update : function(component, event, helper) {
		component.set("v.truthy","false")
	}
})

//Component1Renderer.js
({
	rerender: function(cmp, helper) {
		console.log('rerender'); 
		return this.superRerender()
	},
})

In above component when you click on “Check” button,update method will update component which in turn call rerender.

Unrender

Framework fires an unrender event when a component is deleted.The base unrender() function deletes all the DOM nodes rendered by a component’s render() function. It is called by the framework when a component is being destroyed. Customize this behavior by overriding unrender() in your component’s renderer. This can be useful when you are working with third-party libraries that are not native to the framework.

//Component1.cmp
<aura:component >

	<aura:attribute name="truthy" type="Boolean"></aura:attribute>
	
	<aura:if isTrue="{!v.truthy}">
		<c:Component2 />
	<aura:set attribute="else">
		Second Component is deleted
	</aura:set>
	</aura:if>
	
	<ui:button aura:id="button" label="Check" press="{!c.update}"/>
</aura:component>

//Component1Controller.js
({
	update : function(component, event, helper) {
		component.set("v.truthy","false")
	}
})

//Component1Renderer.js
({
	rerender: function(cmp, helper) {
		console.log('rerender'); 
		return this.superRerender()
	},
})

//Component2.cmp
<aura:component >
	I am in second component
</aura:component>

//Component2Renderer.js
({
	unrender : function (cmp, helper) {
		console.log('Component 2 unrender '); 
		return this.superUnrender();
	},
})

In above code Component2.cmp is deleted when you click on “Check” button on Component1.cmp. When Component2.cmp is deleted framework calls unrender method.

To know more about Best Practices of Lightning Component Rendering click here
Hope this will be helpful 🙂