Aura if else condition not working properly. Still enters the block even if condition is not met

Question

I have this code that must call a child component based on the profile of the user. If 'isProfileA' attribute is true, it must call 'componentA', otherwise call 'componentB'. In my case, 'isProfileA' is true however it calls 'componentB' first and then 'componentA'. The goal is just to call 'componentA'. I don't know why it still enters the else statement. The value of 'isProfileA' is set to true on init. I have also debugged the Apex and JS and its value is true. Does anyone have an idea what could be the problem?

This is the cmp.

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="isProfileA" type="Boolean" default="false"/>


<aura:if isTrue="{!v.isProfileA}">
    <c:ComponentA/>
    <aura:set attribute="else">
        <c:ComponentB/>
    </aura:set>
</aura:if>  

This is the controller.js.

({
    doInit : function(component, event, helper) {
        let action = component.get('c.checkIfProfileA');
        action.setCallback(this, function(response){
           let state = response.getState();
            if(state == "SUCCESS") {
                let returnValue = response.getReturnValue();
                component.set('v.isProfileA', returnValue);
            }
        });
        $A.enqueueAction(action);
    }
})

Answer 1

Calling a server method is always an asynchronous operation. That means that the default value will be shown for at least the amount of time it takes for the server-side code to return a value.

Let's look at your code, with some comments:

({
    doInit : function(component, event, helper) {
        // Create an action
        // This line runs first.
        let action = component.get('c.checkIfProfileA');
        // Set a handler to call after the call returns
        // This line runs second.
        action.setCallback(this, function(response){
           // This line runs fourth.
           let state = response.getState();
           // This line runs fifth.
            if(state == "SUCCESS") {
                // This line runs sixth.
                let returnValue = response.getReturnValue();
                // This will be the SECOND time we render the state
                // This line runs seventh.
                component.set('v.isProfileA', returnValue);
            }
        });
        // Send the request to the server
        // This line runs third.
        $A.enqueueAction(action);
        // End of init; this is the FIRST time we render the state
    }
})

Instead, consider showing a spinner:

<aura:attribute name="isProfileA" type="Boolean" default="{!false}"/>
<aura:attribute name="isLoading" type="Boolean" default="{!true}"/>

<aura:if isTrue="{!v.isLoading}">
    <lightning:spinner />
    <aura:set attribute="else">
        <aura:if isTrue="{!v.isProfileA}">
            <c:ComponentA/>
            <aura:set attribute="else">
                <c:ComponentB/>
            </aura:set>
        </aura:if>  
    </aura:set>  
</aura:if>

Remember, asynchronous code doesn't run in source code order, but rather based on asynchronous events.