Les Signals sous le capot

const a = signal(1);                                  // producer
const b = signal(2);                                  // producer
const sum = computed(() => a() + b());                // consumer ET producer
const product = computed(() => a() * b());
const result = computed(() => sum() + product());     // losange : a et b arrivent ici par deux chemins

// Pendant l’exécution d’une fonction réactive, Angular garde un « consumer actif ».
// Chaque signal lu à ce moment devient sa dépendance. Vous ne déclarez rien : le graphe est construit à partir des lectures.

a.set(5)
  │  PUSH : a incrémente sa `version` et prévient les consumers « live » (template, effect) qu’ils PEUVENT être dirty.
  │        Rien n’est encore recalculé.
  ▼
template / effect marqué dirty  →  la Change Detection planifie un rendu
  │
  ▼
le template lit result()
  │  PULL : result vérifie ses producers (sum, product) — ont-ils une version différente ?
  │        sum vérifie ses producers (a, b) — a a une version différente → sum est recalculé.
  │        Si la nouvelle valeur est ÉGALE à l’ancienne, la version de sum n’augmente pas → la propagation s’arrête.
  ▼
result est recalculé une fois, avec des valeurs déjà cohérentes (glitch-free)

const expensive = computed(() => {
  console.log('calcul…');
  return items().filter(matches).sort(byPrice);
});

items.set(newItems);  // rien ne s’affiche : personne n’a encore lu
expensive();          // « calcul… » — première lecture
expensive();          // rien : valeur mémoïsée
items.set(other);     // toujours rien — marqué comme périmé, non recalculé
expensive();          // « calcul… »

// Par défaut : Object.is. Pour les objets/tableaux, c’est la RÉFÉRENCE qui compte.
const tags = signal(['a', 'b']);
tags.set(['a', 'b']);           // autre référence → « nouvelle » valeur → les consumers se recalculent

// Égalité personnalisée : la valeur ne change pas si elle est « identique » selon votre règle
const sameItems = (x: string[], y: string[]) => x.length === y.length && x.every((v, i) => v === y[i]);
const stableTags = signal(['a', 'b'], { equal: sameItems });
stableTags.set(['a', 'b']);     // égal → la version n’augmente pas → rien en aval

// Un computed a aussi une égalité : si son résultat est égal, la propagation s’arrête là
const parity = computed(() => (n() % 2 ? 'impair' : 'pair'));   // n: 0 → 2 → 4 … parity reste 'pair'

const view = computed(() => {
  if (showDetails()) {
    return details();     // dépendances : showDetails + details
  }
  return summary();       // dépendances : showDetails + summary
});
// À chaque exécution, la liste des producers est reconstruite à partir de ce qui a été EFFECTIVEMENT lu.
// Tant que showDetails() est false, modifier details ne recalcule pas view.

// View effect : créé dans le contexte d’un composant → s’exécute AVANT que ce composant
// soit vérifié par la Change Detection ; il est détruit avec le composant.
@Component({ /* ... */ })
export class Profile {
  constructor() {
    effect(() => console.log('profil', this.user()));
  }
}

// Root effect : créé dans un service fourni dans root → s’exécute avant la vérification de tous les composants ;
// il vit aussi longtemps que l’application.
@Injectable({ providedIn: 'root' })
export class Analytics {
  constructor() {
    effect(() => track(this.route()));
  }
}
// Les deux sont asynchrones (ils ne s’exécutent pas au moment du set()) et liés au processus de Change Detection.

@Component({
  template: `<p>{{ fullName() }}</p>`,   // le template est un consumer réactif
})
export class Card {
  readonly first = signal('Ana');
  readonly fullName = computed(() => `${this.first()} Pop`);
}
// first.set('Ioana') → le nœud réactif du template est marqué dirty → le composant est marqué pour
// vérification (comme markForCheck) → la Change Detection le re-rend. Pas de Zone.js, pas de vérification
// de tout l’arbre : c’est ainsi que fonctionnent les applications zoneless.

// ✗ Écriture dans un computed — erreur : "Writing to signals is not allowed in a `computed`"
const total = computed(() => {
  count.set(items().length);       // effet de bord dans une dérivation
  return items().reduce(sum, 0);
});

// ✗ Effect utilisé pour une dérivation (un rendu de plus, risque de boucles)
effect(() => total.set(items().reduce(sum, 0)));

// ✓ La dérivation est un computed
const total2 = computed(() => items().reduce(sum, 0));

// ✗ Mutation : même référence → Object.is dit « égal » → rien ne se met à jour
items().push(newItem);
// ✓
items.update((list) => [...list, newItem]);

NŒUD          RÔLE                    QUAND IL S’EXÉCUTE
signal        producer                — (il ne change que sa valeur et sa version lors d’un set/update)
computed      consumer + producer     lazy : à la lecture, seulement si une dépendance a changé
effect        consumer « live »       de façon asynchrone, pendant la Change Detection (view : avant le composant ; root : avant tous)
template      consumer « live »       quand le composant est re-rendu après avoir été marqué dirty

RÈGLES
  dépendances = ce que vous avez EFFECTIVEMENT lu lors de la dernière exécution (dynamiques, par branche)
  égalité par défaut Object.is ; { equal } pour les valeurs « identiques » → stoppe la propagation
  un computed sans lecteurs n’est pas calculé du tout
  n’écrivez pas de signals dans un computed ; ne dérivez pas d’état avec un effect
  untracked(() => …) lit sans créer de dépendance