Avoid Async Effects In Svelte

Using async functions inside effects.

🔖 Timestamps

0:00 Intro
0:13 Sponsor
0:28 Doing Side Effects In Svelte
1:07 Why Using Async Effects Is Bad
2:45 Asynchronously Read Values Are Ignored
4:54 Awaiting Promises Inside Effects
6:35 How Effects Work Under The Hood
10:34 Outro

#joyofcode #sveltekit #svelte

[hex]

Thanks so much! I've been working on an application that uses Svelte 5 and accesses a database, and finding any information on how to handle things asynchronously has been a nightmare.

[DeviantFox]

I was not expecting THIS much depth in this short of a video lol

[figloalds]

Rich Harris showing the new async state updates just recently and saying "Let that async in" was pure cinema

[Alexandre_Zamboli]

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?

Thanks in advance!

[davidpierrumentor]

Hi, I love your video and I the feeling you put in it. May I suggest a video on testing a simple application with svete and vitest ? (without and with sveltekit ?). I didn't found any great video with svelte 5.

[honk_tm]

So we are back to writing vars without any other purpose than forcing a refresh on an effect, just as we had with $: before. I thought Svelte 5 was made to fix that horrendous thing...

[mylastore]

Don't you need await to fulfill the promise/async ?

[RohitKumarAnkam]

Hi everyone,
what rich is talking about here?