Contexte dans React

Avant de passer à l'étude du prochain hook, nous devons examiner le concept de contexte dans React.

Habituellement, nous transmettions les données des composants parents aux enfants via les props. Cette méthode est bonne si vous n'avez pas beaucoup de composants et que vous n'avez pas besoin de faire passer les props du parent au composant dont vous avez besoin via des composants enfants plus de 2-3 fois.

Cette méthode peut également devenir extrêmement incommode et entraîner divers problèmes, si ces props ne sont pas du tout utilisées dans les composants intermédiaires (un tel problème est appelé prop drilling), ou si vous devez transmettre les mêmes données à un grand nombre de composants.

Dans ces cas, le contexte peut nous aider, il permet de rendre les données du composant parent accessibles à n'importe quel composant enfant, indépendamment de sa position dans l'arbre des composants, sans les transmettre via les props. En conséquence, seuls les composants qui en ont besoin recevront les données.

Pour utiliser le contexte, il faut le créer. Pour commencer, créons un fichier MyContext.js et importons-y la fonction createContext :

Maintenant, créons l'objet contexte, enregistrons-le dans la variable MyContext, que nous n'oublierons pas d'exporter. Dans notre cas, nous avons défini dans createContext la valeur initiale null, car elle n'est pas essentielle pour nous (nous aurions pu laisser simplement des parenthèses vides). La valeur par défaut définie apparaîtra lors de la lecture du contexte, si aucune autre n'est trouvée. Cette valeur peut être de n'importe quel type :

Dans la leçon suivante, nous créerons une application composée de plusieurs composants, situés dans des fichiers séparés. Si tous les composants étaient dans un seul fichier, nous ne créerions pas de fichier séparé pour le contexte et nous ne l'exporterions pas.

Importons maintenant MyContext.js dans le composant vide App - le composant à partir duquel nous allons transmettre les données :