Comprendre et utiliser le Hook useContext en React

Lors du développement d'une application React, il arrive souvent que des composants parents doivent gérer l'état des composants enfants ou que des informations doivent être transmises d'un enfant à un parent.

Cependant, lorsqu'il y a plusieurs niveaux de composants imbriqués, transmettre des props à chaque niveau devient rapidement complexe à gérer. Cette approche, connue sous le nom de prop drilling, peut rendre le code difficile à maintenir. Chaque modification d'un composant peut avoir des conséquences sur d'autres composants plus profonds dans la hiérarchie, augmentant la complexité.

Le Contexte (Context API) de React est une solution à ce problème. Il permet à un composant d'accéder directement à des données, sans avoir à les transmettre via les props à chaque niveau intermédiaire.

Comment fonctionne le Contexte dans React ?

Le contexte permet de créer un espace global pour stocker un état ou des fonctions, que n’importe quel composant dans l’arbre de l’application peut consommer, peu importe sa profondeur. Il est particulièrement utile pour des informations globales comme le thème (ex. mode clair/sombre), la langue de l'application, ou l'authentification utilisateur.

Attention aux performances !
Lorsqu'une valeur de contexte est mise à jour, tous les composants qui consomment ce contexte seront automatiquement ré-rendus. Il faut donc faire attention à ne pas utiliser le contexte pour des données fréquemment modifiées, car cela peut avoir un impact négatif sur les performances.

Implémentation du contexte dans React

1. Création du contexte

La première étape consiste à créer un contexte. En général, cela se fait dans un fichier séparé pour une meilleure organisation.

import { createContext } from "react";

const ThemeContext = createContext("light"); // "light" est la valeur par défaut

export default ThemeContext;

Dans cet exemple, nous avons créé un contexte ThemeContext avec une valeur par défaut de light. Cette valeur sera utilisée si aucun fournisseur n’est présent dans l’arbre des composants.

2. Utilisation du contexte avec useContext

Une fois que le contexte est créé, vous pouvez le consommer dans n'importe quel composant en utilisant le hook useContext.

import { useContext } from "react";
import ThemeContext from "../contexts/ThemeContext";

function MyComponent() {
  const theme = useContext(ThemeContext);

  return <div>Le thème actuel est {theme}</div>;
}

Dans cet exemple, le composant MyComponent accède directement à la valeur du thème via le contexte, sans avoir à passer des props.

3.  Fournir des valeurs dynamiques avec le Provider

Par défaut, les valeurs que vous recevez correspondent à celles définies lors de la création du contexte. Cependant, cela peut ne pas être très pratique, car vous souhaiterez souvent obtenir des valeurs dynamiques au sein de vos composants. Pour cela, il est nécessaire d'utiliser le fournisseur, SomeContext.Provider.

import { useState } from "react";
import ThemeContext from "../contexts/ThemeContext";

export default function MyApp() {
  const [theme, setTheme] = useState("dark");

  const toggleTheme = () =>
    setTheme((prevTheme) => (prevTheme === "dark" ? "light" : "dark"));

  return (
    <ThemeContext.Provider value={theme}>
      <div>Thème actuel : {theme}</div>
      <button onClick={toggleTheme}>Changer le thème</button>
    </ThemeContext.Provider>
  );
}

Tous les composants imbriqués, peu importe leur niveau de profondeur, auront ainsi accès aux valeurs du contexte fournies. Cependant, il est important de noter que si ces valeurs changent, React va effectuer un nouveau rendu de tous les composants enfants affectés.

Dans React 19, il est désormais possible d’utiliser directement <Context> comme fournisseur, au lieu de passer par <Context.Provider>.