Produire le récapitulatif mensuel optimisé

Un récapitulatif mensuel peut afficher des montants faux si le calcul mélange plusieurs mois ou compte deux fois une dépense. Il peut aussi compliquer le code si vous stockez des résultats qui se déduisent déjà des dépenses. Vous allez calculer ces valeurs à partir des données disponibles, puis vérifier si ce calcul justifie réellement une optimisation.

Les dépenses et le mois sélectionné sont déjà gérés par les couches du projet ; reportez-vous aux leçons sur la source de vérité et le contexte pour leur organisation. Ici, le récapitulatif reste une valeur dérivée : vous ne créez pas un état distinct pour le total ou le nombre de dépenses. Le hook dédié reçoit les dépenses et le mois, puis renvoie les valeurs prêtes à afficher.

Calculer le récapitulatif du mois

Le mois choisi est transmis au hook sous la forme AAAA-MM, comme la valeur produite par un champ HTML de type month. Une date de dépense doit commencer par cette même chaîne pour être incluse. Le calcul parcourt les dépenses une seule fois : il additionne les montants retenus, incrémente leur nombre et cumule les montants par nom de catégorie.

import { useMemo } from "react";
import type { Depense } from "../types/depense";

export type TotalParCategorie = {
  nom: string;
  total: number;
};

export type RecapitulatifMensuel = {
  totalMensuel: number;
  nombreDepenses: number;
  totauxParCategorie: TotalParCategorie[];
};

export function useRecapitulatifMensuel(
  depenses: readonly Depense[],
  mois: string,
): RecapitulatifMensuel {
  return useMemo(() => {
    const totaux = new Map<string, number>();
    let totalMensuel = 0;
    let nombreDepenses = 0;

    for (const depense of depenses) {
      if (!depense.date.startsWith(mois)) continue;

      totalMensuel += depense.montant;
      nombreDepenses += 1;
      totaux.set(
        depense.categorie,
        (totaux.get(depense.categorie) ?? 0) + depense.montant,
      );
    }

    return {
      totalMensuel,
      nombreDepenses,
      totauxParCategorie: Array.from(totaux, ([nom, total]) => ({ nom, total })),
    };
  }, [depenses, mois]);
}

Ce fichier suppose que le type métier Depense expose les champs date, montant et categorie, conformément aux données affichées dans le tableau. La comparaison porte sur le préfixe de la date au format ISO AAAA-MM-JJ ; vérifiez que le service conserve ce format. Le résultat contient le total du mois, le nombre de dépenses retenues et une entrée par catégorie rencontrée.

Brancher les valeurs sur l’interface

Dans Recapitulatif.tsx, appelez ce hook avec les dépenses partagées et le mois choisi, puis affichez ses trois propriétés dans les emplacements déjà prévus par le squelette du projet. Le total par catégorie peut être parcouru pour produire la liste existante. Formatez les montants dans la présentation si nécessaire, sans modifier les nombres conservés par le calcul.

Vérifier que l’optimisation est utile

Avant de conserver la mémoïsation, comparez le comportement sans puis avec useMemo dans React DevTools Profiler, comme dans la leçon consacrée au profilage. Reproduisez la même action, avec le même jeu de données et le même environnement, puis comparez les durées observées pour le composant du récapitulatif et pour l’interaction complète. Un calcul rapide peut être négligeable même si son parcours paraît répétitif à la lecture du code.

Un résultat favorable doit être reproductible et perceptible dans les mesures, sans ralentir ou compliquer le code au point d’annuler le bénéfice. Testez notamment le changement de mois, l’ajout d’une dépense et une période sans dépense : les valeurs doivent changer uniquement lorsque les entrées pertinentes changent. Si le profil ne montre pas d’amélioration utile, retirez la mémoïsation et gardez le calcul simple ; le seuil de pertinence dépend du volume de données et du coût mesuré, pas d’une règle universelle.

À retenir

• Calculez le récapitulatif à partir des dépenses et du mois sélectionné, sans stocker de copie des résultats.
• Filtrez les dates par mois, puis agrégez les montants et le nombre de dépenses en un seul parcours.
• Vérifiez les résultats sur un mois avec dépenses et un mois vide.
• Comparez les profils avant et après ; gardez useMemo seulement si le gain est mesurable et utile.

Dans la prochaine leçon, vous validerez le tableau de bord avec une recette d’accessibilité et des contrôles de livraison.