Usage of force:navigateToComponent and force:navigateToSObject

Question

I'm using one custom lightning component to replace emailauthor.jsp for lightning experience. I'm using force:navigateToComponent event to redirect from custom object lightning page to send email lightning component. Also to return to custom object page I'm using force:navigateToSObject event. What I've noticed when using debugger in Chrome is that once created send email lightning component is never destroyed after going back to custom object lightning page. Is this something that is missing in implementation or should I destroy it explicitly. Could this result in memory leak. Also DOM of the component is still there.

Navigate to component:

btnSendEventReport: function(component, event, helper) {
    var self = this;
    var record = component.get('v.record');
    var action = component.get('c.getEmailAttributes');
    var withTeamMembers = confirm('Would you like to send this to the Client Team?');

    action.setParams({
        recordId: record.Id,
        clientId: record.Relate_to_Client__c,
        withTeamMembers: withTeamMembers
    });

    action.setCallback(self, function(result) {
        var navigateToComponent = $A.get("e.force:navigateToComponent");
        navigateToComponent.setParams({
            componentDef: "c:SendEmail",
            componentAttributes: result.getReturnValue()
        });
        navigateToComponent.fire();
    });

    $A.enqueueAction(action);
},    

Returning to custom object Lightning page:

navigateToRecord : function(component) {
    var objectId = component.get("v.objectId");
    var navigateToSObject = $A.get("e.force:navigateToSObject");
    if (navigateToSObject) {
        navigateToSObject.setParams({
            recordId: objectId
        });
        navigateToSObject.fire();
    }
},

Thanks!

Answer 1

This question is a bit old but still relevant. The quote in the previous answer is not fully accurate according to developers' experience. Lightning Experience does not immediately destroy components no longer in use but rather just hides them from the UI. This is probably an optimization that prevents the browser from expending resources on the destruction that it could be spending on rendering whatever else the user needs now. If the user pokes around to enough new places, LEX eventually destroys the old components.

If you start at Lightning page A, view its DOM in Developer Tools, then start navigating to B, C, D, E, you'll see that it's still there. But notably, if you navigate to A again, A immediately gets zapped from the DOM and recreated.

Developers should take notes: Because your components are not fully destroyed, you cannot rely fully on cmp.isValid() to tell you whether your component is in active use.

Answer 2

That is a good question. Based on following excerpt from lightning component developer guide, the framework destroys the component if it was added via markup or added to a facet if dynamically created. My assumption is since the framework is creating the component when called via navigateToComponent, it destroys it once it is not in use.

Destroying Dynamically Created Components After a component that is declared in markup is no longer in use, the framework automatically destroys it and frees up its memory. 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.