Une des principales caractéristiques de ReactJS est de travailler avec la componentisation lors de la construction d’interfaces complexes. Ainsi, nous parvenons à diluer la complexité générale en petits composants plus simples, allant parfois encore plus loin et construisant des architectures fondées sur des micro-frontends. Le problème, c’est que l’organisation et la hiérarchie des composants exigent souvent le partage d’états, qui doivent être transmis via des props entre différents composants, ce qui engendre ce que l’on appelle le Prop Drilling (quelque chose comme « perçage des propriétés »).
Le Prop Drilling dans les frontends complexes peut atteindre un tel niveau que, compte tenu de la hiérarchie des composants, l’état est passé d’un composant à l’autre sans même être utilisé, juste pour atteindre la destination où il sera nécessaire. Ce genre de situation crée un couplage incroyablement fort entre les composants, rendant leur maintenance difficile, diminuant la réutilisation et, pourquoi pas le dire, rendant le frontend plus sensible aux changements.
Pour résoudre le Prop Drilling, nous devons utiliser des techniques de gestion d’état plus avancées que le simple passage d’états via les props. L’une de ces techniques passe par l’utilisation de l’API Context de ReactJS, que nous verrons comment utiliser dans le tutoriel d’aujourd’hui.
Ce tutoriel s’adresse à ceux qui possèdent déjà une base en ReactJS, comme enseigné dans cette série. Si vous préférez, vous pouvez le suivre en vidéo.
Allons-y !
#1 – Qu’est-ce que l’API Context ?
L’API Context, comme son nom l’indique, est une API pour la création et la consommation de contextes. Un contexte est fondamentalement un wrapper dans lequel le contenu qui s’y trouve a accès à des données et à des comportements communs. Ainsi, si vous avez par exemple 3 composants qui doivent tous recevoir la même information, vous n’avez pas besoin de la transmettre via des props aux trois. Il suffit de créer un contexte, d’envelopper les 3 composants dans le contexte et, à l’intérieur de chaque composant, charger l’information à partir du contexte respectif.
Concrètement, imaginez cette hiérarchie de composants, qui pourrait être celle d’un site e-commerce par exemple, où différents composants ont besoin de connaître les articles ajoutés au panier, et doivent donc les recevoir via props depuis l’application (root) vers le bas.
Ainsi, avec l’API Context, vous créez le contexte et tous les composants fils (children) de ce contexte peuvent accéder à ses valeurs, sans avoir besoin de les transmettre via des props, mais en utilisant un hook approprié uniquement lorsque nécessaire.
En plus de cet exemple de commerce électronique, il est facile d’imaginer des situations liées à l’authentification (les données de l’utilisateur connecté étant généralement nécessaires dans plusieurs composants), aux paramètres de thème (clair versus sombre influençant plusieurs composants) et bien plus encore.
Il est important de souligner que l’API Context n’est pas la seule façon de faire du state management professionnel pour ReactJS, mais pour de nombreux cas jusqu’à une complexité moyenne, elle est indiscutablement la plus utilisée. Une option très populaire pour des frontends extrêmement complexes est Redux.
#2 – Créer un Contexte
Partons du postulat ici que vous avez un projet React créé avec Vite. Peu importe que vous utilisiez JS ou TS, cela dépend de vous. Prenons un exemple simple de commerce électronique où un panier d’achats, ainsi que le comportement d’ajout et de suppression d’articles, feront partie d’un contexte que nous exploiterons ensuite.
Pour créer un contexte, vous devez d’abord créer un fichier dédié, comme CartContext.jsx, par exemple. À l’intérieur, vous allez commencer par importer la fonction createContext de React et l’utiliser pour l’initialiser, avec la structure que vous jugerez adéquate et des valeurs par défaut, comme ci-dessous.
import { createContext } from "react";
const CartContext = createContext({
items: [],
addItem: () => {},
removeItem: () => {},
});
export default CartContext;Reprenez que les valeurs par défaut sont peu pertinentes, comme vous le verrez plus loin lors de l’initialisation du contexte, mais elles sont importantes pour définir la structure du même et ainsi aider l’autocomplétion de l’éditeur.
Ainsi, ici nous définissons que les articles du panier seront stockés dans un tableau et que pour ajouter des articles nous utiliserons la fonction addItem, tandis que pour retirer nous utiliserons la fonction removeItem.
Maintenant, pour que ce contexte prenne effet, nous devons l’importer et l’utiliser au point le plus approprié de notre application, en entourant les éléments qui devront y faire face, dans cet exemple dans App.jsx comme ci-dessous (ignorez les fichiers Cart et ProductList que vous ne connaissez pas encore).
import { useState } from 'react';
import CartContext from './CartContext';
import Cart from './Cart';
import ProductList from './ProductList';
function App() {
const [cartItems, setCartItems] = useState([]);
const addItem = (item) => {
setCartItems((prevItems) => [...prevItems, item]);
};
const removeItem = (item) => {
setCartItems((prevItems) => prevItems.filter((i) => i !== item));
};
return (
<CartContext.Provider value={{ items: cartItems, addItem, removeItem }}>
<Cart />
<hr />
<ProductList />
</CartContext.Provider>
);
}
export default AppNotez d’abord que l’utilisation d’un contexte n’élimine pas la nécessité d’utiliser des états. Cela est nécessaire pour garantir que la mise à jour des données se répercute dans l’application immédiatement, ce qui est attendu sur les fronts React. De plus, les fonctions qui manipulent l’état doivent rester proches de celui-ci, comme dans cet exemple où nous définissons les fonctions d’ajout et de suppression d’articles dans l’état.
Deuxièmement, remarquez que l’utilisation du contexte avec le JSX est identique à celle d’un composant React ordinaire, de type wrapper/ container, qui enveloppe d’autres éléments à l’intérieur. Dans ce cas, nous devons placer tous les composants qui font partie du même contexte, c’est-à-dire qui ont besoin des données de CartContext, à savoir le Cart et le ProductList dans cet exemple (que nous verrons plus en détail). Le seul point important à noter ici est la prop value de CartContext, qui doit recevoir l’objet avec les références aux états (un seul dans ce cas) et les fonctions de manipulation des dits états.
Enfin, remarquez que ni Cart ni ProductList n’attendent des props, toutefois, elles vont utiliser items, addItem et/ou removeItem à l’intérieur, comme nous le verrons ci-dessous.
#3 – Consommer un Context
L’utilisation du contexte est encore plus simple que sa définition et sa déclaration. Dans tous les composants enfants (children) du contexte, vous devez utiliser le hook useContext de React et importer également le contexte lui-même, afin que, lorsqu’ils sont utilisés ensemble, ils permettent au composant d’accéder à son contexte parent. Voici ci-dessous un exemple avec le composant dans le fichier Cart.jsx.
import { useContext } from "react";
import CartContext from "./CartContext";
export default function Cart() {
const { items, removeItem } = useContext(CartContext);
return (
<div>
<h2>Cart</h2>
{items.length === 0 ? (
<p>Your cart is empty</p>
) : (
<ul>
{items.map((item, index) => (
<li key={index}>
{item} <button onClick={() => removeItem(item)}>Remove</button>
</li>
))}
</ul>
)}
</div>
);
}Voyez comment, dans la déstructuration du contexte, je n’ai pris que ce qui importe pour le panier : la liste d’articles et la fonction de suppression. L’ajout d’articles dans le panier d’un commerce électronique se fait via la liste de produits, que nous verrons ensuite.
Le reste de ce composant est très direct, avec une liste basée sur items et la suppression au clic du bouton fondée sur removeItem.
Maintenant, faisons la même chose avec le composant ProductList.jsx.
import { useContext } from "react";
import CartContext from "./CartContext";
export default function ProductList() {
const { addItem } = useContext(CartContext);
return (
<div>
<h2>Product List</h2>
{["Apple", "Banana", "Orange"].map((product) => (
<div key={product}>
{product} <button onClick={() => addItem(product)}>Add to Cart</button>
</div>
))}
</div>
);
}Nous avons ici déjà extrait l’état en ne prenant que addItem, puisque les articles actuellement dans le panier ou la fonction de suppression ne sont pas pertinents pour la liste de produits. Le reste du composant n’a rien de spécial, avec une liste fictive de produits et le bouton qui appelle la fonction d’ajout au clic.
En lançant cette application, vous obtiendrez une apparence similaire à celle ci-dessous, où initialement le panier est vide, mais vous pouvez ajouter et retirer des produits grâce à la Context API, sans prop drilling.
Bien sûr, dans un exemple aussi simple, l’impact en développement frontend n’est pas très marqué, mais c’est avec de bonnes pratiques comme celle-ci que l’excellence se prépare pour des projets plus importants.
À la prochaine !
