Is there a way to destroy LWC from its js controller?

Question

I would like to know if there is a way to destroy LWC component from its js controller. I know in Aura there is something called component.destroy() method. But in lwc I couldn't something like that. Please shed some light on this.

The problem I am facing is, I have created a 'New' page for opportunity with LWC and upon submitting, navigating to the view page. But after that when I come back to opportunity 'New' page, at times, the page doesn't load or the form with previous values is being shown. Hence I would like to destroy the current component after navigating to view page.

Answer 1

From the documentation of Component.destroy()

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.

Now in LWC you cannot create components dynamically yet. Thus there is no destroy as of now.

When a user navigates to a different page, components on the previous page remain in the cache and are hidden, not destroyed

I get this is causing your component to hide and when refocussed to show old values. For this scenario, if you are using UI Api or cacheable then you can call refreshApex before redirecting to ensure when the component is focuccesd again, it will have latest values.

Answer 2

You could add a @wire to the current page reference with a wired function, this way you can prepare your component when the page navigates to or from the one you have your component, therefore leaving you to implement the cleanup or "destruction" logic you consider

import { LightningElement, wire, track } from 'lwc'; 
import { CurrentPageReference } from 'lightning/navigation'; 

export default class Test extends LightningElement { 

  @wire(CurrentPageReference)
  wiredPageRef() { 
    // Navigation was done either in or out, do your magic
  }
}

Answer 3

is your "New" oppty page opening as a modal window? If yes, you can wrap the modal window in a <template if:true={showModal}></template> and set the showModal to false, which will automatically destroy the DOM\component for the modal window. You can set it to false when the save operation is complete and then you can navigate.

If its a regular page you can still wrap it in <template if:true={operationComplete}></template> and setting operationComplete to false when the save operation condition should delete the DOM\component.

Answer 4

One workaround I did was to fire a custom event from lwc and listen it in the parent aura component and call component.destroy() there. I hope this will be helpful for some people who are struggling like me.

This solution did not solve my original problem though.