5

I'm a rookie at lightning component development and i'm trying to understand in which situation we should use $A.getcallback. It's not really clear for me when to use it and the explanation in the documentation is not specific enough.

Could someone explain me as i was a 6 years old kid ?

Thank you!

2
  • Returns a callback which is safe to invoke from outside Aura, e.g. as an event handler or in a setTimeout. The $A.getCallback() call ensures that the framework rerenders the modified component and processes any enqueued actions.
    – Adrian Larson
    Jul 26, 2018 at 15:55
  • @Bryce - my apologies. I deleted my answer as missed get instead answered for set call back.
    – RedDevil
    Jul 26, 2018 at 17:42

1 Answer 1

13

Aura, Lightning's runtime, has a "life cycle" that every event goes through. Everything in Aura starts with an event being fired, some controller handling that event, data propagating through any changed attributes, and finally a rendering phase to update the DOM.

However, in JavaScript, we're allowed to do things that can step outside of this life cycle, which can break things. As a simple example, consider what happens if you do something like this:

valueChange.evt

<aura:event type="APPLICATION" description="Event template" />

demo.app

<aura:application >
    <aura:attribute name="text" type="String" />

    <aura:handler name="init" action="{!c.init}" value="{!this}" />
    <aura:handler event="c:valueChange" action="{!c.updateView}" />
    <aura:registerEvent type="c:valueChange" name="valueChange" />
    {!v.text}
</aura:application>

demoController.js

({
    init: function(component, event, helper) {
        setTimeout(function() {
            $A.get("e.c:valueChange").fire();
        });
    },
    updateView: function(component, event, helper) {
        component.set("v.text", "Hello World");
    }
})

Here, we try to fire an event outside the application life cycle, and we subsequently get an error; setTimeout guarantees that we won't be in the life cycle by the time the function is called. In previous API versions, this used to cause significant delay in delivering the event, since outside of the life cycle, no events can occur.

We fix that by getting a reference to a function that can kick start the life cycle. We do this by using $A.getCallback:

({
    init: function(component, event, helper) {
        setTimeout($A.getCallback(function() {
            $A.get("e.c:valueChange").fire();
        }));
    },
    updateView: function(component, event, helper) {
        component.set("v.text", "Hello World");
    }
})

Now, instead of crashing, we get to see our message rendered in the app.

The main use for this, and the reason it's called getCallback, is for when you need to use a JavaScript API that is asynchronous. For example, if you're loading a file from the hard drive, or making an API call via XMLHttpRequest, or using Promises (usually). Any time that you want to do something asynchronously, and later be able to update the component values and/or fire an event, you need $A.getCallback.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.