useContext

React 🟢 Junior

Definition

Hook qui lit la valeur du Context le plus proche dans l'arbre. Evite le prop drilling en partageant des donnees entre composants distants.

Analogie

Comme la radio FM : tout le monde dans la zone capte le meme signal sans cable direct.

Exemple de code

const ThemeCtx = createContext('light');

function App() {
  return (
    <ThemeCtx.Provider value="dark">
      <Toolbar />
    </ThemeCtx.Provider>
  );
}
function Button() { const theme = useContext(ThemeCtx); }

Cas d'usage

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

Anti-pattern

Mettre trop de donnees dans un seul contexte, causant des re-rendus inutiles de tous les consommateurs.

Termes lies

#hooks#interview#state