1. Utiliser les effets
La plupart du temps, les "effets" impliquent la gestion du temps qui passe, des appels au réseau, ou bien l'accès direct au DOM. On peut vouloir par exemple s'abonner à un flux de messages lorsqu'on sélectionne un canal de discussion, ou lancer un chronomètre quand un bouton est cliqué.
L'accès direct est non recommandé lorsqu'on utilise un framework tel que Svelte, React ou autre. Il est toutefois nécessaire dans de rares cas.
Pour faire ce genre de choses, il faut pouvoir écouter les changements des variables réactives et exécuter une fonction en réponse.
La rune $effect
Svelte fournit la rune $effect pour utiliser des effets.
<script>
let size = $state(50);
let active = $state(true);
$effect(() => {
console.log('Size', size); // exécuté si size change
});
$effect(() => {
console.log('Active', active); // exécuté si active change
});
</script>Chaque effet est capable de lister lui-même les variables réactives qu'il contient comme
dépendance, que ces variables proviennent d'une rune $props, $state ou $derived. Puis, si une
des dépendances d'un effet change, l'effet est exécuté. Un effet peut donc avoir plusieurs
dépendances :
<script>
let size = $state(50);
let active = $state(true);
$effect(() => {
// exécuté si `size` ou `active` change
console.log('Size', size);
console.log('Active', active);
});
</script>Les effets sont exécutés par "batch", c'est-à-dire que si size ou active changent l'un juste
après l'autre, l'effet ci-dessous ne sera pas joué 2 fois, mais une seule. Svelte "attend" un
certain temps avant de mettre à jour les variables réactives le nécessitant, ainsi qu'avant
d'exécuter les effets qui en dépendent. > N'utilisez pas $effect pour mettre à jour une variable
réactive lorsqu'une autre change, > utilisez plutôt $derived. ## Réagir au montage Les effets sont
joués lorsqu'une de ses dépendances change. Mais ils sont aussi exécutés lorsque le composant est
monté, au début du cycle de vie de l'instance.
<script>
let size = $state(50);
// exécuté à chaque fois que `size` change, exécuté également lorsque le composant apparaît
// dans le DOM
$effect(() => {
console.log('Size', size);
});
</script>Néanmoins, si vous souhaitez uniquement réagir au montage du composant, donc lorsqu'il arrive dans
le DOM, vous pouvez utiliser onMount, importé depuis svelte.
<script>
import { onMount } from 'svelte';
let size = $state(50);
onMount(() => {
// exécuté uniquement lorsque le composant apparaît dans le DOM
console.log('Size', size);
});
</script>Le callback de
onMountne sera joué que côté client, jamais côté serveur.