✳flâneur — a map of the web's best reading

Fine-grained reactivity • Docs • Svelte 5 preview

svelte-5-preview.vercel.app · 212 words · saved by 1 readers

In Svelte 4, reactivity centres on the component and the top-level state declared therein. What this means is that in a situation like this... ...editing any individual todo will invalidate the entire list. You can see this for yourself by opening the playground, adding some todos, and watching the console in the bottom right. remaining(todos) is recalculated every time we edit the text of a todo, even though it can't possibly affect the result. Worse, everything inside the each block needs to be checked for updates. When a list gets large enough, this behaviour has the potential to cause performance headaches. With runes, it's easy to make reactivity fine-grained, meaning that things will only update when they need to. Begin by using the $state rune: Next, update done and text to use get and set properties: In this version of the app, editing the text of a todo won't cause unrelated things to be updated. If we only do the first step (adding $state) and skip the second (exposing the st

Overview • Svelte Docs Skip to main content Tutorial Packages Playground Blog On this page Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript... App < script > function greet () { alert ( 'Welcome to Svelte!' ); } </ script > < button onclick = {greet}>click me</ button > < style > button { font-size : 2 em ; } </ style > < script lang = "ts" > function greet () { alert ( 'Welcome to Svelte!' ); } </ script > < button onclick = {greet}>click me</ b

Explore this link on the map →

related reading