Checking Component Validity

Inside the Framework Lifecycle

You don’t need a cmp.isValid() check in the callback in a client-side controller when you reference the component associated with the client-side controller. The framework automatically checks that the component is valid. Similarly, you don’t need a cmp.isValid() check during event handling or in a framework lifecycle hook, such as the init event.

Let’s look at a sample client-side controller.

1({
2    "doSomething" : function(cmp) {
3        var action = cmp.get("c.serverEcho");
4        action.setCallback(this, function(response) {
5            var state = response.getState();
6            if (state === "SUCCESS") {
7                if (cmp.get("v.displayResult)) {
8                    alert("From server: " + response.getReturnValue());
9                }
10            }
11            // other state handling omitted for brevity
12        });
13
14        $A.enqueueAction(action);
15    }
16})

The component wired to the client-side controller is passed into the doSomething action as the cmp parameter. When cmp.get("v.displayResult) is called, we don’t need a cmp.isValid() check.

However, if you hold a reference to another component that may not be valid despite your component being valid, you might need a cmp.isValid() check for the other component. Let’s look at another example of a component that has a reference to another component with a local ID of child.

1({
2    "doSomething" : function(cmp) {
3        var action = cmp.get("c.serverEcho");
4        var child = cmp.find("child");
5        action.setCallback(this, function(response) {
6            var state = response.getState();
7            if (state === "SUCCESS") {
8                if (child.get("v.displayResult)) {
9                    alert("From server: " + response.getReturnValue());
10                }
11            }
12            // other state handling omitted for brevity
13        });
14
15        $A.enqueueAction(action);
16    }
17})

This line in the previous example without the child component:

1if (cmp.get("v.displayResult)) {

changed to:

1if (child.get("v.displayResult)) {

You don’t need a child.isValid() call here as child.get("v.displayResult) will return null if the child component is invalid. Add a child.isValid() check only if you’re making multiple calls against the child component and you want to avoid a null check for each result.

Outside the Framework Lifecycle

If you reference a component in asynchronous code, such as setTimeout() or setInterval(), or when you use Promises, a cmp.isValid() call checks that the component is still valid before processing the results of the asynchronous request. In many scenarios, the cmp.isValid() call isn’t necessary because a null check on a value retrieved from cmp.get() is sufficient. The main reason to call cmp.isValid() is if you’re making multiple calls against the component and you want to avoid a null check for each result.

For example, you don’t need a cmp.isValid() check within this setTimeout() call as the cmp.set() call doesn’t do anything when the component is invalid.

1window.setTimeout(
2    $A.getCallback(function() {
3        cmp.set("v.visible", true);
4    }), 5000
5);