Renderer in Lightning Bundle

Renderer in Client-side is to override default rendering for a component. You can consider what data should render on load or on reload. The framework’s rendering service takes in-memory component state and creates and manages the DOM elements owned by the component. If you want to modify DOM elements created by the framework for a component, you can modify the DOM elements in the component’s renderer. Otherwise, the framework will override your changes when the component is rerendered.

The base component in the framework is aura:component. Every component extends this base component.

This renderer has base implementations for the four phases of the rendering and rerendering cycles:

• render()
• rerender()
• afterRender()
• unrender()

---

When a component framework calls these methods whenever a component is rendered or rerendered. We have rendering lifecycle and rerendering lifecycle to better understand how the above methods can be better utilized.

Rendering life cycle.

Happens once in a lifetime of component unless component gets explicitly unrendered.

• When a component is created, init event is fired by default. (you can call init’s controller method).
• You can call afterRender() method to enable interaction with DOM tree.
• Framework fires render() method, enables to interact with DOM tree.
• Handling the render event is preferred to create a custom renderer and overriding afterRender().

Rerendering life cycle.

Handles rerendering of components whenever data changes in component. Follows below sequence.

• Browser triggers one or more events.
• Each event can trigger multiple actions that can update data.
• Updated data can fire more events.
• Rendering service tracks the stack of events that are fired
• The framework rerenders all the components that own modified data by calling each component’s rerender() method.
• Framework fires render() method, enables to interact with DOM tree.
• Handling the render event is preferred to create a custom renderer and overriding rerender().

This was all about life cycle of rendering and rerendering now we will discuss about the methods that we use.

---

render()

All components call render method by default. But if you want to customize the render method then mention it explicitly in the lightning component’s, Render component. Customize rendering by creating a render() function in your component’s renderer to override the base render() function, which updates the DOM.

• The render() function returns a DOM node, an array of DOM nodes, or nothing.
• If you do not want to override the default function and extend it, you can use superRender() from render() method before adding custom code in render(). superRender() will execute default render function and once it is done, the custom instructions gets executed.

render : function(component, helper) {
    var ret = this.superRender();
    // do custom rendering here
    return ret;
},

rerender()

In component, when an event fires, it can trigger action to change data and eventually call rerender().

• rerender() function enables components to update themselves based on updates to other components since they were last rendered.
• rerender() function does not return a value.
• If you do not want to override the default function and extend it, you can use superRender() from render() method before adding custom code in render(). superRender() will execute default render function and once it is done, the custom instructions gets executed.

rerender : function(component, helper){
    this.superRerender();
    // do custom rerendering here
}

afterRender()

If you want to interact with DOM tree after the framework’s rendering  service has inserted DOM elements you can use afterRender() function. You generally want to extend default after rendering by calling superAfterRender() function before you add your custom code. It doesn’t return a value

afterRender: function (component, helper) {
        this.superAfterRender();    
        // interact with the DOM here    
},

unrender()

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.

• You can customize the behavior by overriding unrender() in your component’s renderer.
• This method can be useful when you are working with third-party libraries that are not native to the framework.
• generally extends default unrendering by calling superUnrender() from your unrender().

unrender: function () {
    this.superUnrender();
    // do custom unrendering here
}

---

Note:

 A Renderer is in lightning bundle is saved as componentNameRenderer.js. If you component name is My_Lightning_Component, then a controller will be saved as My_Lightning_ComponentRenderer.js.