Faire remonter l'état et partager des données

Placez chaque état dans l'ancêtre commun le plus proche pour partager une donnée entre plusieurs composants sans la dupliquer.

7 min · 3 questions

Deux composants frères doivent afficher la même donnée : un champ de recherche et la liste qu'il filtre, par exemple. Un état local dans chacun ne peut pas fonctionner, car ils ne se voient pas. La solution est de faire remonter l'état dans leur ancêtre commun le plus proche : le parent détient la donnée et la redistribue par les props.

import { useState } from "react";

function ProductPage({ products }) {
  const [query, setQuery] = useState("");

  return (
    <>
      <SearchBar query={query} onChange={setQuery} />
      <ProductList products={products} query={query} />
    </>
  );
}

Les enfants deviennent alors des composants pilotés : ils reçoivent la valeur en lecture et, pour la modifier, appellent la fonction de rappel fournie par le parent. Les données descendent par les props, les demandes de changement remontent par les fonctions. Ce flux à sens unique rend le comportement de l'application facile à suivre.

function SearchBar({ query, onChange }) {
  return (
    <input
      value={query}
      onChange={(e) => onChange(e.target.value)}
      placeholder="Rechercher un produit"
    />
  );
}

function ProductList({ products, query }) {
  const visible = products.filter((p) =>
    p.name.toLowerCase().includes(query.toLowerCase())
  );
  return (
    <ul>
      {visible.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Chaque donnée doit avoir une source de vérité unique. Si deux composants stockent chacun leur copie du même état, elles finiront par diverger : l'une sera mise à jour, l'autre non, et l'interface deviendra incohérente. Faire remonter l'état supprime ce risque. Quand la donnée doit traverser de nombreux niveaux, la composition (leçon suivante) puis le contexte allègent le passage de props.

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Où placer un état dont deux composants frères ont besoin ?
   • Dans le premier des deux frères, qui le transmet à l'autre
   • Dans leur ancêtre commun le plus proche
   • Dans une variable globale déclarée hors de React
   • Dans chacun des deux frères, synchronisés à la main
2. Comment un composant enfant peut-il modifier un état détenu par son parent ?
   • En modifiant directement la prop reçue
   • En appelant une fonction de rappel passée en prop par le parent
   • En utilisant useState avec la même valeur initiale que le parent
3. Pourquoi éviter de stocker la même donnée dans deux états différents ?
   • Cela consomme trop de mémoire
   • React interdit deux useState avec la même valeur initiale
   • Les deux copies finissent par se désynchroniser et l'interface devient incohérente