Search code examples
lifecyclesvelte

What is the difference between statements inside onMount and ouside onMount lifecycle?


It seem to me (I know I'll be wrong) that things I do inside onMount lifecycle function in svelte can also be done outside it. Is there a difference? or.. I'm missing huge points.

<script>

  import {onMount} from 'svelte'

  function doSomething() {
    // ......
    // ..........
  }

  onMount(() => {
    function doSomething() {
      // ......
      // ..........
    }
  })

</script>

Solution

  • As stated in the API documentation, onMount will run when the component is added to the DOM, and only then.

    Statements ran outside the onMount callback will execute when the component is mounted, but also when the component is ran in SSR.

    Usually you put things inside the onMount callback statement that will need the DOM to be available, or that can't be executed Server Side when using SSR for various reasons.