Parfois, on a besoin de partager une donnée entre plusieurs composants, sans avoir à la transmettre manuellement à chaque niveau avec des props. C’est notamment le cas pour :

• Un thème d’interface (clair/sombre)
• L’utilisateur connecté
• La langue choisie
• Un panier ou une devise

Pour éviter de passer des props à chaque niveau, React nous fournit une solution élégante : le contexte, grâce au hook useContext.

Qu’est-ce qu’un contexte ?

Un contexte, c’est comme une boîte de données partagée. On la remplit quelque part dans l’arbre de composants, et tout composant situé en dessous peut y accéder, sans avoir besoin de recevoir explicitement une prop.