If you have worked with aura components you know we can have one component inside another component. Generally, the outer component is called a parent component and the inner one is called a child component. Also, every component will have a init event which nothing but acts as the constructor for that particular component.This event is automatically fired when an app or component is initialized, prior to rendering.

So our point of discussion here is if we have two components: parent and child inside an application both having init event then which init event is fired first at the time application gets loaded.

Let’s see this with an actual implementation so we’ll go to our developer console and we’ll create two components such that one is inside the other and
place the outer component inside our aura application.

parentAuraCmp.cmp

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

parentAuraCmpController.js

({
	doInit : function(component, event, helper) {
		console.log('inside parent Init');
	}
})

ChildAuraCmp.cmp

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

ChildAuraCmpController.js

({
    doInit : function(component, event, helper) {
        console.log('inside child init');
}
})

myApp.app

<aura:application extends = "force:slds">
	<c:parentAuraCmp></c:parentAuraCmp>
</aura:application>

If you preview the myApp.app you will see that child component’s init gets fired first as console log statement of child is displayed first and then parent’s init gets fired and its console log is displayed.

But suppose, I want my parent component’s init method to be executed first and then the child component’s init later. For example, I want to pass some attributes to child component after performing some calculation in my parents init method and that attributes value is used in the child components init method. How can we do that?

It is very easy to handle that, you just have to play with Aura if and conditionally load your child component whenever you feel ready to do it.So let’s implement that.

We will create an attribute with default value as false inside a parent component and wrap child components declaration inside aura if .Now since the default value of this attribute is false that means this component will won’t get instantiate initially now what we’ll do is we’ll make this attribute value as true inside our parent components init method only after all our calculations are performed and we are ready to execute child components init method.

Updated parentAuraCmp.cmp

<aura:component >
    <aura:attribute name = "showChild" type = "Boolean" default = "false"/>
    <aura:handler name = "init" value = "{!this}" action = "{!c.doInit}"/>
    <aura:if isTrue = "{!v.showChild}">
    	<c:childAuraCmp></c:childAuraCmp>
    </aura:if>
</aura:component>

Updated parentAuraCmpController.js

({
	doInit : function(component, event, helper) {
	   console.log('inside parent Init');
           component.set("v.showChild",true);
	}
})

Now, if you will preview the application , console log statement of child is displayed.

This means only when the attribute is made true, child component gets instantiated after which its init gets executed.
This is how we can control the order of execution of init methods in aura components.

If you want to watch demo of this please watch the below video.