Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Supported JavaScript
Invoking Actions on Component Initialization
Sharing JavaScript Code in a Component Bundle
Sharing JavaScript Code Across Components
Using External JavaScript Libraries
Dynamically Creating Components
Detecting Data Changes with Change Handlers
Finding Components by ID
Working with Attribute Values in JavaScript
Working with a Component Body in JavaScript
Working with Events in JavaScript
Modifying the DOM
Modifying DOM Elements Managed by
Handle the render Event
Create a Custom Renderer
Modifying DOM Elements Managed by External Libraries
Checking Component Validity
Modifying Components Outside the Framework Lifecycle
Throwing and Handling Errors
Calling Component Methods
Dynamically Adding Event Handlers To a Component
Dynamically Showing or Hiding Markup
Adding and Removing Styles
Which Button Was Pressed?
Formatting Dates in JavaScript
Using JavaScript Promises
Making API Calls from Components
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Handle the render Event

When a component is rendered or rerendered, the aura:valueRender event, also known as the render event, is fired. Handle this event to perform post-processing on the DOM or react to component rendering or rerendering. The event is preferred and easier to use than the alternative of creating a custom renderer.

The render event is fired after all methods in a custom renderer are invoked. For more details on the sequence in the rendering or rerendering lifecycles, see Create a Custom Renderer.

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

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

In this example, the onRender action in your client-side controller handles initial rendering and rerendering of the component. You can choose any name for the action attribute.