Understanding:
Lightning Life Cycle comes with a set of system events to notify components when the framework does something important. For example: init event is sent to every component when they are initially loaded. Similarly “rerender” event is sent when the framework thinks a component needs to be re rendered due to a button click or change in some attribute value.
But when there are multiple components, multiple events are triggered within each component and in various order. Understanding when these events are triggered and in what order can help us write better code and also identify potential performance issues due to things like “race condition”, “re-rendering” and more.
Consider the following structure of components to better understand:
Below picture shows the actual App itself:
The code for the components is as follows:
App:
Controller:
Renderer:
Parent component:
Controller:
Renderer:
Child Component 1:
Controller:
Renderer:
Child Component 2:
Controller:
Renderer:
Sub Child 1:
Controller:
Renderer:
Sub Child 2:
Controller:
Renderer:
Initial load of components:
Let’s look at what happens when the app is first loaded. “init” (in JS controller), “render” (in renderer) and “afterRender” (in renderer) are called and in the following manner:
The init method for the innermost component is called first and then its parent and so on up to the top most parent in the tree. Similarly render and after render events are called in the same order.
Passing Data via attribute:
It is common to pass data from one component to another as an attribute. Let’s see how system events are triggered when that happens. In this case, when “Plus1” button in any of the 3 components is clicked, the value of “num” is incremented and is passed to the other components via attribute.
Case 1:
Click “Plus1” button in Main App
When the button is clicked in the component tree, the events are handled from inner to the outer component in phases.If the component that triggered the event has any parent components then the events are handled for all those components in same order. The framework triggers set of events for the top level components and then the subsequent components .
Case 2: Click “Plus1” button in Parent Component
In this case the change event is called for the top level components first and then for the component which actually fired the event (Parent Component).Since Parent component has one parent component i.e. TestApp therefore the events are handled for TestApp as well.
Case 2: Click “Plus1” button is clicked in SubChild1 Component
Similarly in this case the event is fired from the innermost component, therefore the event is handled for the top level components first until the component that actually fired the event is reached(Subchild1).
Conclusion:
When there are multiple components, system events are triggered in “phases” . For example: “init” is called for each components and then in 2nd phase “render” is called for each component and so on.
The order in which events are sent across components differs a lot. Some start from top-level component first and some from innermost child component.
If you are listening to “change” event or “doneRendering” event and doing lot of work in those handlers, then you might hit performance issues.
