The component lifecycle starts when the client sends an HTTP request to the server and the component configuration data is returned to the client. No server trip is made if the component definition is already on the client from a previous request and the component has no server dependencies.
Let’s look at an app with several nested components. The framework instantiates the app and goes through the children of the v.body facet to create each component, First, it creates the component definition, its entire parent hierarchy, and then creates the facets within those components. The framework also creates any component dependencies on the server, including definitions for attributes, interfaces, controllers, and actions.
The following image lists the order of component creation.
After creating a component instance, the serialized component definitions and instances are sent down to the client. Definitions are cached but not the instance data. The client deserializes the response to create the JavaScript objects or maps, resulting in an instance tree that’s used to render the component instance. When the component tree is ready, the init event is fired for all the components, starting from the children component and finishing in the parent component.
The rendering lifecycle happens once in the lifetime of a component unless the component gets explicitly unrendered. When you create a component:
The following image depicts a typical rendering lifecycle of a component on the client, after the component definitions and instances are deserialized.
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
Let’s say that you have an app myApp.app that contains
a component myCmp.cmp with a ui:button component.
During initialization, the init() event is fired in this order: ui:button, ui:myCmp, and myApp.app.