Runes & réactivité

Les blocs de base de Svelte 5 : $state, $derived et $effect.

📖 Légende des termes▾

Rune $state: Déclare une variable réactive : toute modification est reflétée automatiquement dans le DOM.
Rune $derived: Calcule une valeur qui se met à jour toute seule quand ses dépendances ($state) changent.
Rune $effect: Exécute un effet à chaque changement des valeurs qu’il lit (attention : pas de lecture, pas d’effet).
Réactivité granulaire: Le DOM est mis à jour au plus près (seuls les éléments concernés changent), sans passer par un virtual DOM.

La rune $state remplace les let réactifs de Svelte 4. C’est la source de vérité réactive d’un composant.

Une variable déclarée avec $state(…) se met à jour automatiquement à l’écran.
L’état est profondément réactif : modifier un objet ou un tableau le déclenche aussi.
Pour écrire, on affecte directement : x = 10 modifie l’état et rafraîchit l’UI.

src/lib/Counter.sveltesvelte

let compte = $state(0)

<button onclick={() => (compte += 1)}>
  clics : {compte}
</button>