Éviter les calculs répétés

Quand l’interface se met à jour, plusieurs éléments peuvent demander les mêmes nombres : tâches terminées et tâches totales. Recalculer ces valeurs à chaque demande est inutile si les tâches n’ont pas changé. Vous allez isoler ce calcul dans statistiques.js et conserver son dernier résultat tant que la liste utilisée reste la même.

Les leçons précédentes ont établi que l’état évolue sans modifier les données précédentes. Cette propriété permet ici de traiter la référence du tableau des tâches comme un indice fiable : si le tableau est identique, son contenu n’a pas été remplacé par une transition de l’application.

Mémoriser le résultat de progression

La mémoïsation consiste à conserver le résultat d’un calcul associé à ses entrées. Dans ce module, creerCalculateurProgression crée un calculateur qui garde en mémoire la dernière liste reçue et le résultat correspondant. Si une autre demande fournit exactement la même référence de tableau, le calculateur renvoie le résultat mémorisé au lieu de recompter les tâches.

// js/statistiques.js
export function creerCalculateurProgression() {
  let derniereListe = null;
  let dernierResultat = null;

  return function calculerProgression(taches) {
    if (taches === derniereListe && dernierResultat !== null) {
      return dernierResultat;
    }

    let terminees = 0;
    for (const tache of taches) {
      if (tache.terminee) {
        terminees += 1;
      }
    }

    dernierResultat = {
      terminees,
      total: taches.length
    };
    derniereListe = taches;
    return dernierResultat;
  };
}

Le cache contient une seule entrée : la dernière liste et son résultat. À la première demande, la fonction parcourt les tâches, compte celles dont terminee vaut true, puis mémorise le compte et la longueur de la liste. À la demande suivante, si la référence est la même, elle renvoie ces nombres sans refaire la boucle.

Utiliser le calculateur et vérifier son invalidation

Pour éviter de partager le cache entre plusieurs consommateurs, créez une instance du calculateur et réutilisez-la. Cet exemple autonome représente des tâches conformes au projet. Il vérifie le résultat initial, puis crée une nouvelle liste après avoir terminé une tâche : la nouvelle référence invalide le cache et déclenche un nouveau calcul.

// Exemple autonome à exécuter avec js/statistiques.js
import { creerCalculateurProgression } from "./statistiques.js";

const calculerProgression = creerCalculateurProgression();
const taches = [
  { id: 1, libelle: "Préparer le plan", terminee: true },
  { id: 2, libelle: "Rédiger le contenu", terminee: false }
];

console.log(calculerProgression(taches));
console.log(calculerProgression(taches));

const tachesMisesAJour = taches.map(function (tache) {
  if (tache.id === 2) {
    return { ...tache, terminee: true };
  }
  return tache;
});

console.log(calculerProgression(tachesMisesAJour));

{ terminees: 1, total: 2 }
{ terminees: 1, total: 2 }
{ terminees: 2, total: 2 }

Les deux premiers appels reçoivent le même tableau : le second réutilise le résultat. Après la création de tachesMisesAJour, le calculateur reçoit une nouvelle référence et recompte les valeurs, ce qui donne deux tâches terminées sur deux. En pratique, vous appelez le calculateur avec la liste courante de l’état et utilisez ses propriétés pour fournir les nombres affichés par la progression.

Cette version conserve uniquement la dernière liste : elle convient à un calculateur associé à un affichage unique et ne fait pas croître le cache au fil des mises à jour. Le comptage de tâches est volontairement simple pour rendre le mécanisme visible. La mémoïsation est surtout utile lorsque le calcul dérivé est coûteux ou sollicité plusieurs fois avec les mêmes entrées ; elle ne garantit pas à elle seule un gain si le contrôle des entrées coûte autant que le calcul évité.

À retenir

• La mémoïsation conserve un résultat pour le réutiliser lorsque les entrées n’ont pas changé.
• Le calculateur compare la référence de la liste et garde un seul résultat en cache.
• Une nouvelle liste produite par une transition invalide le cache et entraîne un nouveau calcul.
• Ne modifiez pas en place un tableau déjà passé au calculateur.
• Évaluez le bénéfice avant de mémoriser un calcul peu coûteux.

Dans la prochaine leçon, vous chargerez une fonctionnalité seulement lorsqu’elle sera demandée par l’utilisateur.