Contexts API (React)

React Context est comme un tunnel magique dans une grande ville pleine de bâtiments (composants dans React). Imagine que tu veux partager des lunettes de soleil avec toute ta famille dispersée dans cette ville sans avoir à voyager de maison en maison pour les donner à chacun. Ce serait fatiguant, n'est-ce pas ? Surtout si certains vivent très loin ou si tu as besoin de changer les lunettes souvent. React Context te permet de créer ce tunnel magique qui traverse la ville, permettant à tous dans ta famille d'accéder aux lunettes de soleil instantanément, peu importe où ils se trouvent.

Comment ça marche ?

1. Création du Context : Tu crées d'abord un Context, qui est comme l'annonce de la construction du tunnel. Tu définis ici quel type d'objets (comme les lunettes de soleil) tu veux partager.

2. Provider : Ensuite, tu as besoin d'un Provider. C'est comme l'entrée du tunnel où tu places les lunettes de soleil. Le Provider est placé au niveau le plus haut où tous ceux qui ont besoin des lunettes peuvent l'atteindre. Tu peux mettre tes lunettes de soleil ici, et elles seront disponibles à travers le tunnel.

3. Consumer : À l'autre bout, tu as les Consumers, ou les sorties du tunnel. Ce sont les membres de ta famille qui ont besoin des lunettes. Ils peuvent accéder aux lunettes à travers le tunnel, peu importe où ils se trouvent dans la ville.

Avantages :

• Simplicité : Au lieu de passer les lunettes de main en main, tu les places simplement dans l'entrée du tunnel, et tous ceux qui ont besoin peuvent les prendre directement.
• Organisation : Cela garde ta ville (ton application) bien organisée, car tu n'as pas besoin de construire des routes compliquées (props drilling) partout.

React Context est une fonctionnalité de React qui permet de partager des valeurs (state, fonctions, ou n'importe quelle donnée) entre différents composants à travers l'arborescence de l'application, sans avoir à passer explicitement les props à chaque niveau de composants. Cela résout le problème commun du "props drilling", où les données doivent être passées à travers de nombreux composants qui n'en ont pas nécessairement besoin, juste pour atteindre ceux qui en ont besoin.

Techniquement, voici comment React Context fonctionne :

1. Création du Context : Tu commences par créer un Context à l'aide de la fonction React.createContext(). Cette fonction retourne un objet contenant deux composants, Provider et Consumer, que tu peux utiliser pour passer et recevoir des données partout dans ton application. La valeur passée à createContext() est la valeur par défaut du Context, utilisée lorsque le composant consommateur n'a pas de Provider correspondant au-dessus de lui dans l'arbre des composants.

   const MyContext = React.createContext(defaultValue);
   

2. Provider : Le Provider est un composant qui permet de passer la valeur du Context aux composants enfants qui consomment ce Context. Les composants plus bas dans l'arbre peuvent s'abonner à ce Context et se re-render automatiquement lorsque la valeur du Context change.

   <MyContext.Provider value={/* valeur du context */}>
     {/* enfants qui peuvent consommer le context */}
   </MyContext.Provider>
   

3. Consumer : Avant l'arrivée des Hooks (React), le Consumer était utilisé pour accéder à la valeur du Context dans un composant. Le composant Consumer s'abonne au Context et se re-rend quand la valeur du Context change.

   <MyContext.Consumer>
     {value => /* rendu basé sur la valeur du context */}
   </MyContext.Consumer>
   

4. Hook useContext : Avec l'introduction des Hooks dans ReactJS 16.8, l'accès au Context a été grandement simplifié grâce à useContext. Ce Hook accepte l'objet Context créé par React.createContext() et retourne la valeur actuelle du Context, celle fournie par le Provider le plus proche au-dessus du composant dans l'arbre.

   const value = useContext(MyContext);
   

Quand utiliser React Context : React Context est particulièrement utile lorsque tu as besoin de partager des données d'état globales comme des préférences utilisateurs, des informations d'authentification, des thèmes UI, ou quand tu veux éviter le "props drilling" dans des applications de taille moyenne à grande.

À noter : Bien que React Context soit puissant, il n'est pas toujours la meilleure solution pour la gestion d'état à grande échelle. Pour des cas d'utilisation plus complexes, comme la gestion d'états globaux avec de nombreuses mises à jour fréquentes, des bibliothèques comme Redux ou MobX peuvent offrir de meilleures performances et une expérience de développement plus riche.

Notions à explorer pour aller plus loin :

• useState et useEffect : Comprendre ces Hooks de base te permettra de gérer l'état et les effets secondaires dans tes composants, ce qui est souvent nécessaire en combinaison avec Context pour réagir aux changements.
• useContext Hook : Une façon plus moderne et simple de consommer le Context dans les composants fonctionnels.
• Redux/MobX : Pour les applications plus grandes avec des états plus complexes, regarder ces bibliothèques peut te donner plus de contrôle et de flexibilité que le Context seul.
• Performance Optimizations : Apprendre à optimiser les performances lors de l'utilisation de Context, notamment en évitant les re-renders (React) inutiles.

Voilà, tu as maintenant une bonne base pour commencer à utiliser React Context et rendre ta ville (ton application) plus efficace et organisée !