What is the difference between onDestroy and the function returned by onMount callback in Svelte?

Asked

Viewed 57 times

3

Svelte provides the function onMount, which is executed just after rendering the component and takes a function per parameter:

onMount(() => { console.log('hello') })

If the argument function returns another function, it will be executed when the component is about to be destroyed:

onMount(() => { return () => { console.log('xau') } })

But there is also the method onDestroy, that works the same as onMount, except that it is performed at the end of the component’s life cycle:

onDestroy(() => { console.log('xau') })

Is there any difference between using the function returned by callback of onMount and the onDestroy?

javascript svelte

2 answers

4


Callback of destruction via onMount

The life cycle function onMount agenda one callback to be executed once the component has been assembled in the FOD.

Optionally, if this callback return another function, this will be used as callback for the moment the component is being unmounted. It is executed when the component is unmounted.

A peculiarity of onMount is that it does not run if Svelte is running on the server (in the context of the components server-side). Therefore, the disassembly function of the onMount nay will be executed on the server side.

Callback of destruction via onDestroy

It’s basically the same as the previous one, but there are two differences.

Unlike the callback of destruction created by useMount, which causes the destruction of the component, callback scheduled by onDestroy is executed before that the disassembly even begins.

Therefore, onDestroy will always be executed before of callback of destruction created by onMount.

Another difference is that the onDestroy is executed by components running on the server side. Therefore, they are required in some SSR-facing functionality.

Demonstration

I left an example in Svelte REPL.

Note that when the component is unmounted, messages on the console are printed in the following order:

  1. Component destroyed! (track onDestroy)
  2. Component destroyed! (track onMount)

This demonstrates the behaviour of the execution order described above.

  • 1

    Perfect! I only recommend replacing the word construido for destruído on the stretch within onMount: return () => console.log('Componente construído! (via onMount)'); why sometimes even the smallest things can cause confusion.

  • @Yoyo, really, was a mess of mine. I meant "destroyed" even. Thanks for the warning. : ) Tomorrow I will delete my comment.

3

The difference is that the function returned by the callback of the onMount:

onMount(() => {
    console.log('Componente montado')

    /* função que será executada após a destruição do componente: */
    return () => {console.log('Componente já foi destruído')}
})

will be executed after the component has been disassembled, while the function described within theonDestroy:

onDestroy(() => {
    console.log('O componente está prestes a ser destruído')
})

is executed immediately before of him being destroyed. As is said in the onMount documentation, and onDestroy

  • I read something else, I read that onMount runs when MOUNTED and not when Disassembled, onDestroy is when it is disassembled. It was also not answered about the { return () => { ... })

  • William, as stated in his reply, function returned by onMount, and not onMount itself, is what runs at the end of the cycle. It must have been unclear, so I will edit to avoid confusion

  • I understood, I think you need to elaborate better the answer, the why of that exist for example, but already this clear +1

  • Just for the record, in the documentation this written WHEN and not AFTER, is exactly "after"?

  • Yes! It is written [...]it will be called when the component is unmounted. that would be será chamada quando o componente estiver desmontado, that is, the component has been destroyed, so the method is called. In the description of the onDestroy we have: run immediately before the component is unmounted., dare, roda imediatamente antes do componente ser desmontado

Browser other questions tagged javascript svelte

You are not signed in. Login or sign up in order to post.