Lightning Component (hidden) on a record page is getting fired even after the Record Tab is closed

Question

I created a lightning component to close the console tab and i want to do this whenever its child objects' field (status__c) is changed to "Completed". I am using setInterval to check the field value constantly but the poller method seems to be running even after the flexipage where this component is embedded is closed.

AccComponent.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:isUrlAddressable" access="global" controller="AccountViewController" >
    <!-- Id of the Account the page hosting this component is showing -->
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="Interactions" type="vlocity_ins__CustomerInteraction__c" />
    <lightning:workspaceAPI aura:id="workspace" />
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
</aura:component>

AccComponentController.js

({
    doInit : function(component, event, helper) {
        console.log("Tab Focused");
        helper.pollApex(component, event, helper); 
    },
})

AccComponentHelper.js

({
    getJsonFromUrl : function () {
        var query = location.search.substr(1);
        var result = {};
        query.split("&").forEach(function(part) {
            var item = part.split("=");
            result[item[0]] = decodeURIComponent(item[1]);
        });
        return result;
    },
    
    pollApex : function(component, event, helper) {
        //execute callApexMethod() again after 5 sec each
        window.setInterval(
            $A.getCallback(function() {
                helper.callApexMethod(component,helper)
            }), 5000
        );   
    },

    callApexMethod : function (component,helper){
        console.log("Record Id in Aura: "+component.get("v.recordId"));
        console.log("Interaction Id in Aura  -- > interId :: "+helper.getJsonFromUrl().vlocity_ins__interactionId);
        var recId = component.get('v.recordId');
        var interId =  helper.getJsonFromUrl().vlocity_ins__interactionId;
        if(recId != null && interId != null ){
            console.log("::: TRUE HERE :::")
        }else{
             console.log("::: FALSE HERE :::")
        }
    }
})

I am seeing "::: TRUE HERE :::" in console log when I am on flexipage for account and also I am seeing "::: FALSE HERE :::" when I am on Home page after closing the account tab.

Can anyone explain me reason for this behavior and how can I make this component to be invoked only while on flexipage?

Answer 1

FIRST - Aura component gets initialized and the code inside setInterval runs forever as it's async and never gets cleared even when the component is destroyed.

This is some strange behavior in Aura seen in cases where you start a setInterval and if never closed/cleared the code inside that keeps on running.

You can check if your component is invalid then clear the interval.

    //execute callApexMethod() again after 5 sec each
    const checkInterval = window.setInterval(
        if(component.isValid()){
          $A.getCallback(function() {
            helper.callApexMethod(component,helper)
          }), 5000
        } else {
            clearInterval(checkInterval);
        }
    ); 

This should stop your setInterval if your component is not valid anymore. i.e. when you tab is closed.

SECOND - This is very browser intensive code, what if there are multiple tabs opened, then each tab will run its own setInteval which will eat up too much chrome memory, ultimately crashing chrome. You can think of a utility bar platform event subscription flow, if your concurrent clients are not more than 2000, or same setInterval logic with a Utility bar flow, where you fire setInterval once with all the record id of tabs open, also add or remove ids, from Input param, of based on tab close and tab open event.