Provider Pattern

React 🟡 Mid

Définition

Pattern qui utilise Context.Provider pour fournir des données ou des services a un sous-arbre de composants, sans prop drilling.

Analogie

Comme le Wi-Fi d'un bâtiment : tous les appareils dans la zone y accèdent sans câble direct.

Exemple de code

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
// Usage: <ThemeProvider><App /></ThemeProvider>

Cas d'usage

Fournir des services globaux (theme, i18n, auth, feature flags) a toute l'application.

Anti-pattern

Créer un 'Provider Hell' avec 15 providers imbriques a la racine sans les composer.

Termes liés

#patterns#interview

En entretien

Explique-moi le Provider Pattern.
Il utilise Context.Provider pour fournir des données ou services à tout un sous-arbre de composants sans prop drilling, comme le Wi-Fi d'un bâtiment auquel tous les appareils accèdent sans câble direct. On l'utilise pour des services globaux comme le theme, l'i18n, l'auth ou les feature flags.
Quel est le piège classique du Provider Pattern ?
Créer un 'Provider Hell' avec 15 providers imbriqués à la racine sans les composer, ce qui devient illisible. Il vaut mieux composer les providers plutôt que les empiler à plat.

Fiche mise à jour le 2026-09-27