Article summary
I’ve been working with the Svelte framework for about a year and a half now. If someone asked me if I recommend it, I would probably say no and that they should use React instead. That might be changing with Svelte’s newest version, Svelte 5, though.
My biggest problem with Svelte up until this point has been their reactive variables (a.k.a. something like $: foo = bar + baz). This Svelte function has been really nice to reach for and use when building components, but it quickly becomes unwieldy. That’s because the states of some bigger components inevitably become more complex as an application grows.
I think the biggest pain point of these reactive variables is that they are meant to handle derived state and side effects in a component. Coming from React land, that pretty much means it functions as a useState hook and a useEffect hook simultaneously. It took me a long time to realize that this is why component states were becoming harder and harder to read and understand as our application grew. This is also the main reason I’m super excited about Version 5 and Svelte’s new “Runes.”
Svelte Runes break apart the $: reactive variable into a few much more React-like features that really cut down on complexity.
$state
You now can use the state rune to create a reactive state like so:
let sum = $state(0);
$derived
Then you can create further, derived states from your state variables like this:
let doubled = $derived(sum * 2)
$effect
You can use the effect rune to run side effects after state changes (this code will run every time sum changes):
$effect(() => {
console.log(sum);
});
A Step Forward
There are also a few more runes such as $props and $bindable that you can read about in Svelte’s new docs regarding runes, but the ones listed above are the ones I’m most excited about as they break apart the old reactive variable.
I believe this is a major step forward with Svelte and am really excited to start using it on my project. With these changes, I might finally start recommending it over React as a UI framework since it is much faster than React and now has a much clearer way of handling component state. Speaking of performance, there are also some pretty huge performance improvements coming with this new version, so it should be even faster than before which is crazy. I encourage anyone currently using Svelte to go ahead and upgrade to version 5 because it is almost completely backward compatible! This is super exciting since it allows us to slowly migrate to the new version one component at a time, instead of doing a major refactor all at once.
Please give it a try and let me know what you think!