Skip to main content

Chapitre 10 : État partagé et contexte

État partagé, Le contexte

État partagé​

Dans une application React, chaque composant possède son propre état. Cependant, certaines données doivent être accessibles à plusieurs composants en même temps (par exemple, l’utilisateur connecté à une session).
Partager l’état permet de garantir que tous les composants utilisent la même information et restent synchronisés. Sans cela, il devient difficile de maintenir une application cohérente.

Nous avons vu plus tôt que les composants parents partageaient des props vers les composants enfants. Cette approche est claire et respecte le flux de données unidirectionnel de React.Cependant, lorsque l’arborescence est trop profonde, ce n’est pas pratique car il faut transmettre l’information d’une couche à l’autre en passant par plusieurs autres couches qui n’ont sûrement pas besoin de l’information. Ce problème s’appelle le prop drilling.

Pour résoudre ce problème, React a introduit le contexte.

Le Context​

Le Context est un mécanisme fourni par React pour partager des données sans passer explicitement par les props. Il permet de rendre une valeur disponible à tous les composants situés dans une partie de l’arborescence.

Un Context est défini une seule fois, puis fourni via un Provider.
Les composants enfants peuvent ensuite consommer cette valeur, où qu’ils se trouvent dans l’arbre.

Le Context est particulièrement adapté aux données dites globales, comme :

  • l’utilisateur connecté
  • le thème (clair / sombre)
  • la langue de l’application
  • des paramètres de configuration

Il permet de centraliser ces informations et d’éviter le prop drilling. Cependant, il ne doit pas être utilisé pour tous les états de l’application. Un usage excessif peut rendre le flux de données moins explicite et compliquer le débogage.

Bonnes pratiques :

  • Penser d’abord aux props : toujours se demander en premier lieu si l’information peut être placée dans un composant parent, qui la transmettra aux composants enfants. Cela permet de bien identifier d’où viennent les informations.
  • Si ce n’est pas possible et que trop de composants éparpillés de l’application ont besoin de la même information, alors utiliser le context.
  • Attention à bien structurer le context

Questions clés (validation des acquis du chapitre)​

  • Pourquoi certains états doivent-ils être partagés ? Pour garantir que plusieurs composants utilisent la même donnée synchronisée.
  • Qu’est-ce que le prop drilling ? Le fait de passer des props à travers plusieurs composants intermédiaires inutilement.
  • À quoi sert le Context ? À partager des données sans les passer via les props.
  • Dans quels cas utiliser le Context ? Pour des données globales comme l’utilisateur, le thème ou la langue. Ces données doivent peu changer (car un changement du contexte génère un re-rendu de tous ses enfants).

Exercices :​

Exercice - Partager des informations à traver le context​

https://fr.react.dev/reference/react/createContext

  1. Reprendre l’application React avec le composant “Article”
  2. Créer un contexte et y stocker le thème de l’application “Dark” ou “Light”
  3. Récupérer cette information et mettre à jour le thème en fonction (background foncé ou background clair)

Liens utiles:
https://dmitripavlutin.com/react-context-and-usecontext/