useContext : Le guide complet pour gérer tes données globalement

Tu as déjà eu l'impression de jouer au facteur avec tes props React ? Tu passes des données de composant en composant, juste pour qu'elles arrivent à destination ? C'est ce qu'on appelle le "prop drilling", et useContext est là pour résoudre ce problème.

C'est quoi un React Context ?

Imagine que tu organises une fête d'anniversaire. Au lieu de passer le gâteau de personne en personne jusqu'à l'invité d'honneur (comme les props), tu le places au centre de la table pour que tout le monde puisse y accéder directement (comme un context).

En React, le Context fonctionne de la même manière. C'est comme une "bulle" qui contient des données accessibles à tous les composants à l'intérieur, peu importe leur profondeur dans l'arbre des composants.

Voici un exemple concret :

// ThemeContext.tsx
import { createContext } from 'react';

type Theme = 'light' | 'dark';
export const ThemeContext = createContext<Theme>('light');

// App.tsx
export const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
      <MainContent />
      <Footer />
    </ThemeContext.Provider>
  );
};

// DeepNestedButton.tsx
import { useContext } from 'react';

export const DeepNestedButton = () => {
  const theme = useContext(ThemeContext);

  return <button className={`btn-${theme}`}>Mon bouton {theme}</button>;
};

Quand utiliser useContext ?

useContext est particulièrement utile quand tu souhaites partager des données entre plusieurs composants.

Par exemple un Toggle qui permet d'afficher un bouton qui Toggle ainsi que du contenu associé. On aurait 3 composants :

1. Toggle : container qui gère le contexte
2. ToggleButton : bouton qui toggle l'affichage du contenu
3. ToggleContent : contenu associé qui est affiché ou non (avec une props value="on" ou "off")

Dans cette exemple, on utilise un context pour partager le contexte du toggle entre les composants.

L'avantage c'est qu'on peut ensuite utiliser plusieurs Toggle dans notre application et chaque Toggle aura son propre contexte.

Utiliser les contextes pour des states globaux

Par contre, attention ⚠️ useContext n'est pas fait pour :

• La gestion d'état global complexe : Pour ça, utilise plutôt Zustand
• Les mises à jour fréquentes : Le Context force le re-render de tous les composants qui l'utilisent

Les bonnes pratiques avec useContext

1. Créer un hook personnalisé : Comme dans l'exemple ci-dessus avec useUser, ça permet de :

   • Centraliser la logique d'accès au context
   • Ajouter des vérifications de type
   • Améliorer la réutilisabilité

2. Séparer les contexts : Ne mets pas tout dans un seul context. Divise selon les responsabilités :

<ThemeProvider>
  <UserProvider>
    <SettingsProvider>
      <App />
    </SettingsProvider>
  </UserProvider>
</ThemeProvider>

3. Optimiser les performances : Si tu as besoin de mises à jour fréquentes ou de gérer un état global complexe, considère plutôt Zustand. C'est un excellent outil de gestion d'état qui offre de meilleures performances pour ces cas d'usage.

Conclusion

useContext est un outil puissant pour partager des données globalement dans ton application React. Il est parfait pour les données qui changent peu souvent et qui doivent être accessibles à plusieurs composants.

Pour les états globaux plus complexes avec des mises à jour fréquentes, je te conseille de regarder mon guide sur Zustand, qui est plus adapté à ces cas d'usage.

N'oublie pas : comme pour tous les outils en développement, ce n'est pas parce que tu peux utiliser useContext que tu dois l'utiliser partout. Commence simple avec les props, et utilise useContext quand le prop drilling devient vraiment problématique.