Dialog lifecycle and memory management recommendations?

[charlie-roosen]

Hi,

I'd welcome a steer regarding managing dialog lifecycle, particularly with an eye towards memory management. This is in the context of a single page application (SPA) that has a lot of possible dialogs that individually may not actually be used by a particular user.

The typical examples in the shadcn-svelte documentation basically declare the dialog as children of some component, with an "open" property for each that is used to show and hide it. In my dialog implementations, I encapsulate the "open" property within the dialog components and expose a show() method to set "open=true".

For example, a menu component might have a reference to an About dialog and a function called by the menu item to display the dialog:

<script>
   import AboutDialog from '$lib/components/layout/dialogs/AboutDialog.svelte';

   let aboutDialog : AboutDialog;

   export function showAboutDialog() : void {
       aboutDialog.show()
   }
</script>

<AboutDialog bind:this={aboutDialog}/>

An alternative approach to dialog creation is to declare the reference for the dialog, then use "mount()" to initialize it the first time it is used. For example, here is a bit of code providing a method to show an upload file dialog that creates the dialog the first time it is requested, then shows/hides it on open/close for the remainder of the page life:

import UploadFileDialog from '$lib/components/items/dialogs/UploadFileDialog.svelte';

let uploadFileDialog : UploadFileDialog;

export function showUploadFileDialog(e: CellClickedEvent) : void {
  if (uploadFileDialog === undefined){
       uploadFileDialog = mount(UploadFileDialog, {target: document.body}) as UploadFileDialog;
   }
   uploadFileDialog.show(e.data.node)
}

Currently I don't do anything to destroy the dialog, it just gets hidden when the user closes it.

I've read the MDN page on JavaScript memory management (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management) but still don't have a good understanding of whether it is best with dialogs to keep around singleton instances of dialogs for reuse, or drop references and perhaps call Svelte "unmount()" to release the resources.

So my questions are:

a) Are there "best practice" or memory use reasons to prefer the "bind:this" versus "mount on first use" approach for dialog creation?

b) The same question regarding "best practice" or memory use reasons to just hide the dialog versus destroying / unmounting on close?

If that is too open-ended a question, I'd value a pointer to some shadcn-svelte, bits-ui, or floating-ui documentation or code relevant to memory management or lifecycle.

Thanks in advance,
Charlie