How to properly handle async initialization in Svelte 5 without onMount?

Question

I'm migrating my project from Svelte 4 to Svelte 5, and one major pain point is the removal of the traditional onMount usage for async logic.

In Svelte 4, I used onMount(async () => { ... }) to fetch data from my backend and perform validations right after the component loads.

In Svelte 5, I understand that $effect and @effect are the new way to run side effects, but $effect does not accept an async function, and $effect doesn’t seem as intuitive when dealing with promises — especially with TypeScript complaining if you try to return a Promise.

What's the cleanest and most idiomatic way to run an async effect only once on component mount in Svelte 5? Is this pattern below acceptable?

$effect(() => {
  (async () => {
    const res = await fetch('/api/data');

    data = await res.json();
  })();
});

Or is there a better way to handle this common pattern?

During the automatic migration from Svelte 4 to Svelte 5, I noticed that all onMount functions were removed and replaced by the run function from the svelte/legacy module.

This worked as a temporary compatibility layer, but now I want to follow the recommended approach using runes like $effect instead of relying on legacy APIs. However, I'm still unsure what the best pattern is to handle async logic that should only run once after the component mounts — which is what I used onMount for.

Any guidance on the cleanest way to do this with the new runes?

onMount is not deprecated in Svelte 5 and it allows async functions. The auto-migration script helps with the bulk of the migration, but it isn't so smart and can change certain things without need, as intent is hard to fully algorithmically predict. After running the auto-migrate, it's best to look over the diffs, and change anything that doesn't look correct manually, the replacement of onMount in places where it was needed is one of such cases likely. — goose_lake
– goose_lake, Commented Apr 29 at 22:22

brunnerh · Accepted Answer · 2025-04-12 15:15:13Z

1

You can just keep using onMount, there is no real reason not to.

$effect does not accept async functions because await breaks its dependency tracking. If you really want to use $effect anyway, you can use an IIFE as shown or extract the logic to a separate function. You just should be aware of how async code behaves in an $effect.

answered Apr 12 at 15:15

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to properly handle async initialization in Svelte 5 without onMount?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related