Svelte 5 Runes Demystified (3/4) - Why You Should Never Use $effects When You Can Use $deriveds!

Understanding how your framework works under the hood is the best way to write bug-free code, and save hours of pulling your hair out. This is part 3 of a 4-part video series on Svelte 5's runes. Svelte 5 runes are great, and in the docs we're told in passing not to use $effects when we can use $deriveds. Seems like a generally good idea, but there's more to it. Pulling on this thread opens up what I consider to be the least talked about and most thing to understand about Svelte 5: microtasks. The lack of understanding of microtasks will, in my opinion, be the source of the most gotchas and bugs for future Svelters.

For the visualisation purposes, I created a library/app (link below) that allows visualisation of the signals, reactions, dependency graphs.

Nano Signals Visualiser
https://github.com/petermakeswebsites...

Me
https://petermakeswebsites.co.uk

Special thanks to the folks at the Svelte discord and Dominic (  / trueadm  ) for clearing things up for me!

0:00 welcome
0:30 microtasks
4:00 $effects are in microtasks
5:05 dont use effects instead of deriveds
9:20 cant track $effect reactions
11:05 tick
13:00 lazy evaluation
19:55 $effect hierarchies
23:27 recapitulation
25:25 no $derived side effects
27:37 next