Provider Pattern

React 🟡 Mid

Definition

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

Analogie

Comme le Wi-Fi d'un batiment : tous les appareils dans la zone y accedent sans cable 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

Creer un 'Provider Hell' avec 15 providers imbriques a la racine sans les composer.

Termes lies

#patterns#interview