Les effets

Un effet exécute un effet de bord, manipulation du DOM, journalisation, appels réseau, et se ré-exécute dès que ses lectures réactives changent :

import { signal, effect } from '@fluixi/reactive/signal';

const theme = signal('dark');

effect(() => {
  document.body.dataset.theme = theme(); // se ré-exécute quand theme change
});

$effect fait la même chose sans l'import, et createEffect est la même fonction sous son nom d'origine, tout ce qui suit vaut pour les deux.

L'effet s'exécute une fois immédiatement pour établir ses dépendances, puis à chaque changement.

Nettoyage

Enregistrez un nettoyage avec onCleanup. Il s'exécute avant la ré-exécution de l'effet et lors de sa destruction, idéal pour les minuteurs, écouteurs et abonnements :

import { onCleanup } from '@fluixi/reactive/signal';

effect(() => {
  const id = setInterval(tick, delay());
  onCleanup(() => clearInterval(id)); // nettoyé avant la prochaine exécution / à la destruction
});

Valeur précédente

La fonction d'effet reçoit sa valeur de retour précédente, pour comparer d'une exécution à l'autre :

effect((prev) => {
  const value = count();
  if (prev !== value) report(prev, value);
  return value;
});

Nommer

Le troisième argument nomme l'effet pour le graphe des devtools, comme les signaux et les memos prennent un nom :

effect(() => syncTitle(title()), undefined, { name: 'sync title' });

Un effet sans nom apparaît comme un parmi d'autres ; un effet nommé dit à quoi il sert quand vous cherchez pourquoi quelque chose s'est relancé.

Regroupement (batch)

Plusieurs écritures dans batch ne notifient les dépendants qu'une fois, après le lot :

import { batch } from '@fluixi/reactive/signal';

batch(() => {
  first.set('Grace');
  last.set('Hopper');
}); // les effets dépendant des deux s'exécutent une seule fois

Suivant : Les stores.