Composants et hooks React fr FR

Résumé : Cette page documente le fonctionnement de la réactivité des données dans StartER, s'appuyant sur le système de cache de React et le hook useMutate.

Routage et UI

Le routage est assuré par React Router. Chaque page est un composant React associé à un chemin dans src/react/routes.tsx. StartER utilise une approche moderne basée sur les Promesses et la mise en cache pour gérer le chargement des données.

Gestion des données

StartER sépare la récupération des données (Lecture) de leur modification (Écriture).

Lecture : `use()` et `cache()`

Pour charger des données, nous conseillons d'utiliser la fonction use de React couplé à la fonction utilitaire cache de StartER. Ces fonctions garantissent que la même requête n'est pas envoyée en boucle lors des re-rendus.

Exemple dans ItemList.tsx :

import { use } from "react";
import { cache } from "../../helpers/cache";

function ItemList() {
  // Suspend le composant tant que les données ne sont pas arrivées
  const items = use(cache<Item[]>("/api/items"));

  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.title}</li>)}
    </ul>
  );
}

Écriture : `useMutate()` et réactivité

Le challenge des applications React "data-driven" est de mettre à jour l'interface après une modification (mutation). StartER résout cela via le DataRefreshContext et le hook useMutate.

Le cycle de vie d'une mutation :

Mutation : appel API (POST/PUT/DELETE) via la fonction apiMutate().
Invalidation : suppression des données périmées du cache via invalidateCache(). Il est également possible de vider intégralement le cache en utilisant invalidateCache("*").
Refresh : déclenchement d'un rafraîchissement global via un "tick" (compteur) qui force React à re-suspendre les composants et donc à re-fetcher la donnée fraîche.

Le hook useMutate encapsule ces trois étapes :

// src/react/components/item/ItemCreate.tsx
const mutate = useMutate();

const addItem = async (partialItem) => {
  await mutate(
    "/api/items",     // URL
    "post",           // Méthode
    partialItem,      // Corps de la requête
    ["/api/items"]    // Chemins à invalider dans le cache
  );

  // Redirection ou message de succès
};

DataRefreshContext

Pour que ce système fonctionne, l'application doit être enveloppée dans un <DataRefreshProvider>. Ce dernier est déjà configuré dans src/react/routes.tsx.

Il fournit un mécanisme de "global signaling" : dès qu'une mutation réussit, tous les composants utilisant des données mises en cache (et invalidées) vont se mettre à jour automatiquement pour afficher la donnée la plus récente.

Bonnes pratiques

Composants atomiques : gardez vos composants UI "purs". Ils devraient se contenter de use(cache(...)) pour lire et useMutate() pour écrire.
Invalidation explicite : n'oubliez pas de passer la liste des chemins impactés à useMutate pour que l'utilisateur ne voie pas de données obsolètes.