Invoking Actions on Component Initialization

Use the init event to initialize a component or fire an event after component construction but before rendering.

The init event is fired only once per lifecycle of the component. The init event doesn’t get fired if the component is served from cache. To execute JavaScript code every time a component is rendered, use the render event instead.

Note

Let’s look at an example.

1<!--initCmp.cmp-->
2<aura:component>
3    <aura:attribute name="setMeOnInit" type="String" default="default value" />
4    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
5    
6    <p>This value is set in the controller after the component initializes and before rendering.</p>
7    <p><b>{!v.setMeOnInit}</b></p>
8    
9</aura:component>

The magic happens in this line.

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

This code registers an init event handler for the component. init is a predefined event sent to every component. Setting value="{!this}" marks this as a value event. You should always use this setting for an init event.

After the component is initialized, the doInit action is called in the component’s controller.

1// initCmp.js
2({
3    doInit: function(cmp) {
4        // Set the attribute value. 
5        // You could also fire an event here instead.
6        cmp.set("v.setMeOnInit", "controller init magic!");
7    }
8})

The doInit action sets an attribute value, but it could do something more interesting, such as firing an event.

If a component is contained in another component or app, the inner component is initialized first.

Lightning Aura Components Developer Guide

Invoking Actions on Component Initialization

See Also