Déclencher un chargement avec useEffect

Une liste vide ne permet pas de consulter les dépenses enregistrées. Dans cette leçon, vous déclenchez une requête après l’affichage initial du tableau de bord et vous transmettez les données reçues à la liste existante. Vous gardez le chargement dans `App`, qui détient déjà la collection affichée.

Préparer une fonction de récupération

Vous utilisez `fetch` pour envoyer une requête HTTP et lire le corps de la réponse au format JSON. L’URL ci-dessous, `/api/depenses`, doit correspondre à la route de votre serveur qui fournit les dépenses. La fonction est placée dans `src/services/apiDepenses.ts` afin que le composant n’ait pas à contenir les détails de l’appel réseau.

import type { Depense } from "../types";

export async function recupererDepenses(): Promise<Depense[]> {
  const reponse = await fetch("/api/depenses");
  const donnees = (await reponse.json()) as Depense[];
  return donnees;
}

Le type de retour `Promise` indique que la fonction fournit ultérieurement une collection de dépenses. L’assertion sur le JSON aide TypeScript à typer cette valeur, mais ne vérifie pas sa forme à l’exécution : la route doit réellement renvoyer des objets conformes au modèle défini précédemment. Ici, vous ne traitez pas encore les réponses HTTP non réussies ; cette vérification sera abordée dans la leçon suivante.

Déclencher l’appel après le premier affichage

`useEffect` permet de lancer du travail après qu’un composant a été affiché. En fournissant un tableau de dépendances vide, vous demandez à React d’exécuter cet effet lors du montage du composant, plutôt qu’à chaque rendu. Vous conservez les dépenses dans l’état de `App`, puis vous remplacez la collection vide par celle reçue.

import { useEffect, useState } from "react";
import Entete from "./composants/Entete";
import FormulaireDepense from "./composants/FormulaireDepense";
import FiltresDepenses from "./composants/FiltresDepenses";
import ListeDepenses from "./composants/ListeDepenses";
import RecapitulatifMensuel from "./composants/RecapitulatifMensuel";
import { recupererDepenses } from "./services/apiDepenses";
import type { Depense } from "./types";

export default function App() {
  const [depenses, setDepenses] = useState<Depense[]>([]);

  useEffect(() => {
    recupererDepenses()
      .then((depensesRecues) => {
        setDepenses(depensesRecues);
      })
      .catch((erreur: unknown) => {
        console.error("La récupération des dépenses a échoué.", erreur);
      });
  }, []);

  return (
    <div className="depenses">
      <Entete />
      <main className="depenses__contenu">
        <FormulaireDepense />
        <FiltresDepenses />
        <ListeDepenses depenses={depenses} />
        <RecapitulatifMensuel />
      </main>
    </div>
  );
}

L’effet appelle le service sans rendre `useEffect` lui-même asynchrone : la fonction passée à ce hook reste synchrone et la promesse est traitée avec `then`. Lorsque la réponse arrive, `setDepenses` met à jour l’état ; React rend alors de nouveau `App` et transmet la collection à `ListeDepenses`. Celle-ci affiche une ligne par dépense grâce au rendu de liste déjà vu.

Vérifier le résultat

Démarrez l’application avec un serveur qui expose `/api/depenses` et renvoie un tableau JSON conforme au type `Depense`. La liste, initialement vide, reçoit ensuite les éléments récupérés et les affiche. Si la requête échoue, le `catch` écrit l’incident dans la console ; la page ne présente pas encore d’état explicite pour informer l’utilisateur, ce qui sera l’objet de la prochaine leçon.

À retenir

• Placez l’appel réseau dans le service `src/services/apiDepenses.ts`.
• Utilisez `useEffect` pour lancer la récupération après l’affichage initial.
• Un tableau de dépendances vide évite de relancer l’effet à chaque rendu.
• Stockez les données reçues dans l’état canonique de `App` et transmettez-les à la liste.
• Vérifiez que la route renvoie bien un tableau conforme au modèle TypeScript.