Salesforce Lightning Component Lifecycle

All You Need to know About Salesforce Lightning Component Lifecycle

A Lightning component is instantiated, rendered, and rerendered during its lifecycle. Components are only re-rendered when there's a program or value change that requires re-rendering. When a browser event triggers an action that updates data. A component's lifecycle begins with an HTTP request to the component configuration server if it's not been cached from previous requests. Start by creating a component definition and its entire parent hierarchy, then create facets within those components. The framework also creates dependencies for all components on the server, including definitions of attributes, interfaces, controllers, and actions. Custom renderers are useful for manipulating the DOM tree after the framework's rendering service has inserted DOM elements. If you would like to customize the rendering behaviour and you can't do it using markup or the init event, you'll create a client-side renderer. 

dont miss out iconDon't forget to check out: Crash Course on Apex Triggers Salesforce | Complete Guide with Real-Time Scenarios 

Modifying DOM Elements in Lightning Component Framework

The Lightning Framework creates & manages DOM elements owned by components. If you would like to modify these DOM elements created by the framework, modify them in your component's render event handlers or custom renderers. Otherwise, the framework will overwrite your changes when the component is rendered again. Below may be a basic implementation of the four phases of the render and re-render cycle. : 

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


The rendering lifecycle is as follows: 

  1. Init event - Updates a Lightning component or fires an occasion after the component construction but before rendering.
  2. render() - Renders the component body. 
  3. afterRender() - This enables you to communicate with the framework after the component bodies are inserted.
  4. render event - handled by the framework is preferred as a better solution over creating a custom render() and overriding afterRender().

In the case of reRender(), the framework calls the individual reRender method of every component when there is a significant even-based data change. The render event is fired again after this. 

There are two ways to Control DOM elements using the Lightning framework: 

  1. Out-of-the-box render Event 
  2. Custom Renderer 

Out-of-the-box Render Event 

When a Lightning component is rendered or re-rendered, it dispatches an aura:valueRender event also referred to as a render event. Handle this event to perform post-processing on the DOM or react to a component rendering or re-rendering. Events are preferred and straightforward to use instead of creating custom renderers.

Handling the aura:valueRender event is analogous to handling the init hook. Add a handler to your component’s markup.

<aura:handler name="render" value="{!this}" action="{!c.onRender}"/> 

dont miss out iconCheck out another amazing blog by Mohit here: Named Credentials as Callout Endpoints - Salesforce Developer Guide 

Custom Renderer

Go with custom renderer only if:

  1. Manipulate the DOM structure after the framework's rendering service inserts the DOM elements.
  2. Customize rendering behavior impossible with markup or init events. Renderer files are a part of the Lightning component package and are automatically associated if you follow the Renderer.js naming convention.



Popular Salesforce Blogs