🚀 1. Qu’est‑ce qu’un computed() ?

Un computed est une valeur dérivée, calculée automatiquement à partir d’un ou plusieurs signals.

✔ Ce n’est pas une fonction
✔ Ce n’est pas un effect
✔ Ce n’est pas un setter

👉 C’est une formule réactive.

Il s’exécute :

• immédiatement (1ère fois)
• à chaque fois qu’un signal utilisé à l’intérieur change
• si et seulement si le computed est lu dans le template ou dans un effect (lazy)

---

🌱 2. Exemple simple

const price = signal(10);
const qty = signal(2);

const total = computed(() => price() * qty());

Lecture :

total(); // 20

Si qty.set(3) → total() devient automatiquement 30.

---

🔥 3. computed() = la source de vérité dérivée

Avec les computed, tu crées une architecture :

• input() = données venant du parent
• signal() = état interne modifiable
• computed() = logique dérivée, jamais mutée
• effect() = effets de bord

Un computed est la seule manière correcte de calculer une valeur réactive.

---

🧠 4. Ce qu’un computed doit contenir

Uniquement une expression pure et déterministe :

• accès à des signals (a(), b(), …)
• transformations
• mapping
• concaténation
• logique métier "stateless"

✔ Pas d’API call
✔ Pas de mutation
✔ Pas d’output.emit
✔ Pas d’effet de bord

---

🔥 5. Pourquoi computed() est meilleur que ngOnChanges

Avant :

ngOnChanges() {
  this.total = this.price * this.qty;
}

Après :

readonly total = computed(() => this.price() * this.qty());

Avantages :

• zéro hook
• zéro maintenance
• zéro risque d’oubli
• toujours juste
• réactif finement
• beaucoup plus clair

---

🧱 6. Exemple AVANT → APRÈS (complet)

🧓 Avant (Angular classique)

@Input() customer!: Customer;
@Input() legalUnitAddress!: Address;

shippingAddress!: Address | null;

ngOnChanges() {
  this.shippingAddress = this.customer?.shippingAddress
    ?? this.legalUnitAddress
    ?? null;
}

🚀 Après (Signal‑style)

readonly customer = input<Customer>();
readonly legalUnitAddress = input<Address>();

readonly shippingAddress = computed(() =>
  this.customer()?.shippingAddress
  ?? this.legalUnitAddress()
  ?? null
);

Template :

---

⚡ 7. computed() est lazy (⚠ très important)

Un computed :

• ne calcule pas automatiquement tant qu’il n’est pas utilisé
• se désactive automatiquement si aucun observer ne l’utilise

Exemple :

const expensive = computed(() => veryHeavyOperation());

→ Ne fait rien tant que tu ne fais pas expensive().

---

🧨 8. Les pièges à éviter

❌ 1. Mettre des effets de bord dedans

computed(() => {
  console.log("Hello"); // ❌ NE JAMAIS FAIRE
});

✔ Les logs doivent aller dans un effect().

---

❌ 2. Muter un signal dans un computed

computed(() => this.count.set(5)); // ❌ boucle infinie / architecture pourrie

---

❌ 3. Lire un output dans un computed

Un output n’est pas un signal lisible → interdit.

---

❌ 4. Faire du async

computed(async () => { ... }); // ❌

Un computed doit être 100 % synchrone.

---

🛠 9. Patterns recommandés

⭐ Pattern A : Mapping simple

readonly fullName = computed(() => {
  const u = this.user();
  return u ? `${u.firstName} ${u.lastName}` : '';
});

---

⭐ Pattern B : Filtering d’une liste

readonly filtered = computed(() =>
  this.items().filter(i => i.selected)
);

---

⭐ Pattern C : dépendance multiple

readonly statusLabel = computed(() => {
  if (this.loading()) return 'Chargement...';
  if (this.error()) return 'Erreur';
  return 'OK';
});

---

⭐ Pattern D : faire du caching réactif (automatique)

readonly formatted = computed(() =>
  formatAddress(this.address())
);

Tu ne te poses plus la question du "quand recalculer ?" → Angular le fait.

---

🏆 10. Le modèle mental à retenir

✔ signal() → une valeur que tu modifies
✔ input() → une valeur que tu reçois
✔ computed() → une valeur que tu calculs
✔ effect() → une action que tu déclenches

Un computed = une formule.
Un signal = une variable.
Un effect = un effet de bord.
Un input = une source externe.