Le Context dans React est une fonctionnalité puissante qui permet le partage de données entre les composants sans avoir à transmettre explicitement les props à chaque niveau de l’arborescence des composants. Grâce au Context, il est possible de propager des données dans la hiérarchie des composants, les rendant facilement accessibles à n’importe quel composant, quel que soit son emplacement dans l’arbre.

Remarque

Pour commencer, examinons la syntaxe. Un guide étape par étape sera fourni afin de garantir la compréhension de chaque concept. L’utilisation du context nécessite une implémentation spécifique du code à différents niveaux de composants. Une fois la syntaxe expliquée en détail, un exemple pratique sera présenté.

Syntaxe :

1ère étape : Créer un nouveau Context à l’aide de la fonction createContext() de la bibliothèque React et l’assigner à une variable. Cette opération doit être réalisée au niveau supérieur de l’application. Généralement, cela se fait dans un fichier séparé (par exemple, context.js). Ce fichier sera responsable de l’objet Context.

context.js

import { createContext } from "react";

// Create a new React context using the `createContext` function.
const Context = createContext();

// Export the created context so that it can be used in other parts of the application.
export default Context;

2ème étape : Dans le fichier App, encapsulation de tous les composants nécessitant l'accès aux données partagées avec le composant Provider issu du Context créé. Le composant Provider permet de définir la valeur du contexte et de la rendre disponible à tous les composants enfants qui consomment ce contexte.

App.jsx

import React from "react";

// Import the `Context` object from `../context`.
import Context from "../context";

// Import child components that need access to the shared data.
import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  return (
    // Wrap the child components with `Context.Provider`.
    <Context.Provider>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

3ème étape : Dans le fichier App, il est également nécessaire de fournir les données du contexte. Ceci s'effectue en utilisant la propriété value du composant Context.Provider. Toutes les données requises sont assignées à la propriété value.

App.jsx

import React from "react";

import Context from "../context";

import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  // Define any data that you want to share across child components.
  const sharedData = "Some shared data";

  return (
    // Provide the shared data as a value to `Context.Provider`.
    <Context.Provider value={sharedData}>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

4ème étape : Dans les composants enfants (ChildCompOne ou ChildCompTwo), accès aux données partagées à l'aide du hook useContext. Pour utiliser le hook useContext, il est nécessaire de passer le Context créé dans le fichier context.js en argument.

ChildCompOne.jsx

import React, { useContext } from "react";

// Import the `Context` object from "../context"
import Context from "../context";

const ChildComponentOne = () => {
  // Use the `useContext` hook to access data from the `Context`
  const data = useContext(Context);

  // You can now use the shared data in this component

  return <div>{data} in the first component</div>;
};

export default ChildComponentOne;

Code complet de l'application :

Remarque

Veuillez prendre un moment pour examiner chaque étape, en ouvrant chaque fichier et dossier, afin de bien comprendre le processus. Le prochain chapitre proposera un exemple combinant Context et hooks. Cela vous permettra de voir comment ces concepts fonctionnent ensemble en pratique.