Le Context API: Partager des données simplement entre composants

Salut à tous !

Cette semaine, je vous parle du Context API, un outil pratique intégré à React qui permet de partager facilement des données entre plusieurs composants sans devoir les transmettre manuellement à chaque niveau.

Pourquoi l’utiliser ?

Imaginons que vous voulez afficher le thème (clair ou sombre) dans plusieurs composants de votre app. Sans le Context, vous devriez passer cette information via les props dans chaque composant intermédiaire. Avec le Context API, vous définissez une seule fois l’information et vous y accédez directement où vous en avez besoin.

Comment ça marche ?

Voici un exemple très simple :

1. Créer le contexte

import { createContext } from 'react';

const ContexteTheme = createContext();

2. Fournir la valeur

import { useState } from 'react';

function FournisseurTheme({ enfants }) {
  const [theme, definirTheme] = useState("clair");

  return (
    <ContexteTheme.Provider value={{ theme, definirTheme }}>
      {enfants}
    </ContexteTheme.Provider>
  );
}

3. Utiliser la valeur dans un composant

import { useContext } from 'react';

function ChangeurDeTheme() {
  const { theme, definirTheme } = useContext(ContexteTheme);

  return (
    <div>
      <p>Thème actuel : {theme}</p>
      <button onClick={() => definirTheme(theme === "clair" ? "sombre" : "clair")}>Changer le thème</button>
    </div>
  );
}

Ce qu’il faut retenir

• Le Context est parfait pour les infos globales comme le thème, l’utilisateur connecté ou la langue.
• Il évite de répéter des props partout dans votre application.
• Il est déjà inclus dans React, donc pas besoin d’installer de bibliothèque supplémentaire.

À retenir

Le Context API est une solution simple et très utile dans React. Si vous débutez, c’est un bon outil pour structurer votre code sans vous compliquer la vie.

Références

• Passing Data Deeply with Context (Documentation officielle React – Context) https://react.dev/learn/passing-data-deeply-with-context (page consultée le 21 mars 2025)

• React project Theme Switcher using Context API | useContext hook | React Project - YouTube https://www.youtube.com/watch?v=WP9IHZcxEQY (page consultée le 21 mars 2025)