Learning Salesforce Lightning Application Development

Understanding re-rendering the life cycle of a component

Let's take a look at the following diagram, before we dive in deeper with an example:

Let's analyze the preceding behavior with an example component, as follows; we have added an input form element and a button to observe the re-rendering cycle:

<aura:application extends="force:slds">  <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>    <aura:handler name="render" value="{!this}" action="{!c.onRender}"/>    <aura:attribute name="search" type="string"/>    <div aura:id="example">        <span> 1 </span>        <span> 2 </span>        <span> 3 </span>        <span> 4 </span>    </div>    <Lightning:input value="{!v.search}" ...