Le hook `useContext` : Consommer le contexte facilement

Simplifier la consommation de contexte

Nous avons vu que l'approche historique pour consommer une valeur de contexte impliquait l'utilisation du composant `` et d'une fonction enfant (render prop). Bien que fonctionnelle, cette méthode peut devenir verbeuse et entraîner une imbrication importante de code (la "pyramide") lorsque plusieurs contextes sont nécessaires.

Pour adresser ce point et s'intégrer parfaitement à l'écosystème des hooks, React a introduit le hook `useContext`. Ce hook offre une manière beaucoup plus directe, lisible et concise d'accéder à la valeur d'un contexte depuis un composant fonctionnel.

Syntaxe et utilisation de `useContext`

L'utilisation de `useContext` est remarquablement simple. Il prend un seul argument : l'objet contexte lui-même (celui retourné par `React.createContext`) et retourne la valeur actuelle de ce contexte.

import React, { useContext } from 'react';
import { ThemeContext, UserContext } from './contexts'; // Importe les objets contexte

function MonComposantFonctionnel() {
  // 1. Appelle useContext avec l'objet contexte désiré
  const currentTheme = useContext(ThemeContext);
  const currentUser = useContext(UserContext);

  // 2. Utilise directement les valeurs retournées dans le JSX ou la logique
  return (
    

      
Utilisateur actuel : {currentUser ? currentUser.name : 'Invité'}
      
Thème appliqué : {currentTheme}
      {/* ... autre contenu ... */}
    
  );
}

export default MonComposantFonctionnel;

Comparé à l'imbrication nécessaire avec ``, le code devient immédiatement plus plat et plus facile à lire. Vous appelez simplement `useContext` pour chaque contexte dont vous avez besoin, et vous obtenez directement la valeur correspondante.

Comment `useContext` fonctionne

Lorsque vous appelez `useContext(MyContext)` dans un composant :

1. React recherche dans l'arbre des composants, en remontant depuis le composant actuel, le Provider le plus proche correspondant à `MyContext`.
2. Il lit la prop value de ce Provider trouvé.
3. Il retourne cette value.
4. Important : Le composant s'abonne aux changements de ce contexte. Si la prop value du Provider parent change, React déclenchera automatiquement un re-rendu du composant qui a appelé `useContext`, en lui fournissant la nouvelle valeur du contexte.

Si aucun `Provider` pour `MyContext` n'est trouvé dans les ancêtres du composant, `useContext` retournera la valeur par défaut qui a été spécifiée lors de la création du contexte avec `React.createContext(valeurParDefaut)`. Si aucune valeur par défaut n'a été fournie, il retournera `undefined`.

Exemple : Refactorisation avec `useContext`

Reprenons l'exemple du composant `Button` de la section précédente, qui consommait deux contextes via ``, et réécrivons-le en utilisant `useContext` :

Version avec `` (rappel) :

// function Button() {
//   return (
//     
//       {theme => (
//         
//           {user => (
//             
//               {user ? `Action pour ${user.name}` : 'Action'}
//             
//           )}
//         
//       )}
//     
//   );
// }

Version avec `useContext` :

import React, { useContext } from 'react';
import { ThemeContext, UserContext } from './contexts';

function Button() {
  // Appelle useContext pour chaque contexte requis
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);

  // Utilise directement les valeurs
  return (
    
      {user ? `Action pour ${user.name}` : 'Action'}
    
  );
}

export default Button;

La version avec `useContext` est nettement plus concise et évite la "pyramide d'indentation", rendant le code plus facile à lire et à maintenir.

Règles et bonnes pratiques

• useContext doit être appelé au niveau supérieur de votre composant fonctionnel, comme tous les autres hooks. Ne l'appelez pas à l'intérieur de boucles, de conditions ou de fonctions imbriquées.
• Le composant utilisant `useContext(MyContext)` doit impérativement être un descendant d'un ``. Assurez-vous que votre structure de composants place le Provider au bon endroit (souvent assez haut dans l'arbre).
• Chaque appel à `useContext` crée un abonnement distinct. Si la valeur d'un contexte change, seuls les composants qui consomment *spécifiquement ce contexte* via `useContext` seront re-rendus (ainsi que leurs enfants, naturellement).
• Soyez conscient des performances : si la valeur fournie par le `Provider` est un objet ou un tableau créé à la volée à chaque rendu du composant parent, sa référence changera constamment, provoquant des re-rendus inutiles de tous les consommateurs. Utilisez `useState`, `useReducer` ou `useMemo` dans le composant parent pour fournir une valeur stable au `Provider`.

Conclusion : La méthode moderne pour consommer le contexte

Le hook `useContext` est la manière idiomatique et recommandée pour accéder aux valeurs du contexte React dans les composants fonctionnels. Il remplace avantageusement l'ancien pattern `` en offrant une syntaxe épurée, une meilleure lisibilité et une intégration naturelle avec les autres hooks.

En comprenant comment créer un contexte (`createContext`), comment fournir sa valeur (`Provider`) et comment la consommer efficacement (`useContext`), vous disposez d'un outil puissant pour gérer l'état global ou partagé dans vos applications React et éviter les écueils du prop drilling.