useContext

Définition

Hook qui lit la valeur du Context le plus proche dans l'arbre. Depuis React 19 (5 décembre 2024), use(Context) fait la même chose mais peut être appelé sous condition ; useContext reste valide et n'est pas déprécié.

Analogie

Comme la radio FM : tout le monde dans la zone capte le même signal sans câble direct.

Exemple de code

const ThemeCtx = createContext('light');

function App() {
  return (
    <ThemeCtx value="dark">      {/* React 19 : plus de .Provider */}
      <Toolbar />
    </ThemeCtx>
  );
}
function Button() {
  const theme = useContext(ThemeCtx);   // ou use(ThemeCtx)
  return <button className={theme} />;
}

Cas d'usage

Partager des données globales (theme, langue, user) sans passer par chaque niveau de props.

Anti-pattern

Termes liés

Sources

• react.dev/blog/2024/12/05/react-19