Aura Component : Infinte Loop and Other Scenarios

If you have worked with aura components,you know we have component file, controller.js,helper.js etc. Also we have apex class with aura enabled methods where server side logic is present.

We are going to discuss some interesting stuffs here.

Calling one Controller method from another

Have you ever tried calling one method of controller file from another method in controller file itself ?
You may get into a situation where you may have to do . Definitely it is not the good practice to do it. But who cares, we are going to discuss it anyway.

We will create an aura component, lets name it as DemoBlog. We will add following code to Component and controller files:

DemoBlog.cmp

<aura:component controller="parentApex">
	
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:button variant="brand" label="Scenario 2" title="Brand action" onclick="{! c.sourceControllerMethod}" /> 

</aura:component>

DemoBlogController.js

DemoBlogController.js
({
    doInit : function(component, event, helper) {
        console.log('Inside init method');
        
    },
    sourceControllerMethod : function (component, event, helper){
        var targetMethod = component.get('c.targetControllerMethod')
        $A.enqueueAction(targetMethod);
    },
    targetControllerMethod : function (component, event, helper){
        console.log('target method called');  
    }    
})

We have created a button on click of which we have called a sourceControllerMethod method. Now our aim was to call targetControllerMethod from sourceControllerMethod.
We are accessing the targetControllerMethod using component.get(‘c.targetControllerMethod’).
And then using $A.enqueueAction(targetMethod) we are calling targetControllerMethod.
Now we will add our component into aura application and preview App.

If you click on “Scenario 2” button it will make call to targetControllerMethod evantually and display the console log in it.

So we will move on to our next point.

Infinite Loop Scenario

Have you ever got stuck in infinite loop unintentionally while developing aura components? lets see a situation where you can:

We will create an aura component, lets name it as DemoBlog. We will add following code to Component, Controller, Helper fields and Apex Classes:

DemoBlog.cmp

<aura:component controller="parentApex">
	
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:button variant="brand" label="Infinite Loop" title="Brand action" onclick="{! c.infiniteLoop}" />

</aura:component>

DemoBlogController.js

({
    doInit : function(component, event, helper) {
        console.log('Inside init method');
        
    },
    infiniteLoop : function (component, event, helper){
        alert('infiniteLoop controller method called');  
        helper.handleinfiniteLoop(component,event,helper);
        
    }  
})

DemoBlogHelper.js

({
	  handleinfiniteLoop : function (component, event, helper) {
         alert('into helper method before server call');
         var action = component.get('c.infiniteLoop');
         action.setCallback(this, function(response) {
             var state = response.getState();
             if (state === "SUCCESS") {
                 alert('return from server');
             }
         });
         $A.enqueueAction(action);
    }
})

parentApex

public class parentApex {
    @AuraEnabled
    public static string infiniteLoop(){
        return null;
    }   
}

Now we will add our component into aura application and preview the Application.If you click on “Infinite Loop” button , surprisingly you will notice never stoping alerts of controller and helper methods popping up one after another.

Why ? If you have observed carefully, the name of both controller file method and apex class method is same. (infiniteLoop in above example).
So instead of calling the server side method from helper, it ends up calling controller side method. (Notice the syntax for calling one controller method from another. Quite Similar? ).

So be careful while naming the methods from next time !