Context API

React 🟡 Mid

Definition

Systeme de partage de donnees sans prop drilling via createContext, Provider et useContext. Attention : chaque changement de valeur re-rend TOUS les consommateurs.

Analogie

Comme un haut-parleur dans un magasin : tout le monde entend l'annonce, meme ceux qui ne sont pas concernes.

Exemple de code

const AuthCtx = createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  return (
    <AuthCtx.Provider value={{ user, setUser }}>
      {children}
    </AuthCtx.Provider>
  );
}

Cas d'usage

Donnees peu changeantes (theme, auth, locale) partagees a travers l'arbre.

Anti-pattern

Stocker du state frequemment mis a jour dans Context sans le decouper, causant des re-rendus en cascade.
#state#interview#core