Dynamically Destroying Lightning Components

In this blog, I am going to show how to destroy a lightning component. The lightning framework automatically destroys it and frees up its memory that is no longer in use at the same time lightning framework will allow destroying the component that is no longer need by using the Component destroy method.
If you create a component dynamically in JavaScript and that component isn’t added to a facet (v.body or another attribute of type Aura.Component[]), you have to destroy it manually using Component.destroy() to avoid memory leaks. The following example shows destroy the use of the framework.

<aura:component >
    <lightning:button variant="brand" label="Create Component" onclick="{! c.handleComponent }" />
    <lightning:button variant="brand" label="Destroying Component" onclick="{! c.handleDestroy }" />
    <lightning:button variant="brand" label="Destroying Component wit facet" onclick="{! c.handleDestroywithfacet }" />
    
    {!v.body}
</aura:component>
({
    handleComponent : function(component, event, helper) {
        $A.createComponent(
            "ui:inputText",
            {
                "aura:id": "inpId",
                "labelClass":"slds-form-element__label",
                "placeholder":"Enter Some Text",
                "label": "Enter some text",
                "class": "slds-input"
            },
            function(newInp, status, errorMessage){
                if (status === "SUCCESS") {
                    var body = component.get("v.body");
                    body.push(newInp);
                    component.set("v.body", body);
                }
                else if (status === "INCOMPLETE") {
                    console.log("No response from server or client is offline.")
                }
                    else if (status === "ERROR") {
                        console.log("Error: " + errorMessage);
                    }
            }
        );
    },
    handleDestroy : function(component,event,helper){
        if(component.find("inpId")!=null || component.find("inpId")!='undefined'){
            component.find("inpId").destroy();
        }else{
            alert(' Component is already Destroyed ');
        }
        
    },
    handleDestroywithfacet : function(component,event,helper){
        var body = component.get("v.body");
        body.shift();
        component.set("v.body", body);
        
    }
})

In this example, I have created a two button. The Destroying Component button will destroy the component using the destroy method.

handleDestroy : function(component,event,helper){
        if(component.find("inpId")!=null || component.find("inpId")!='undefined'){
            component.find("inpId").destroy();
        }else{
            alert(' Component is already Destroyed ');
        }
        
    },

Similarly Destroying Component wit facet method will be another way of cleaning the component by using facet with below code.

 handleDestroywithfacet : function(component,event,helper){
        var body = component.get("v.body");
        body.shift();
        component.set("v.body", body);
        
    }