Bienvenue, les amis !


Aujourd'hui, nous passons en revue les bases d'un React Hook appelé useContext. useContext est un outil puissant qui va au-delà de useState pour créer un état de type global qui peut transmettre des informations aux composants enfants et petits-enfants sans transmettre directement les accessoires.

Mais je prends de l'avance.
Si vous n'êtes pas familier avec useState, sautez et lisez d'abord mon article précédent, puis revenez et préparez-vous à être surpris !


Comment utiliser 'useState' : https://dev.to/deborah/how-to-use-state-in-react-2pah

Maintenant que vous êtes au courant de « useState », plongeons-nous dans « useContext » !

Qu'est-ce que useContext ? :

useContext est idéal pour les données qui doivent être placées sur une portée globale (comme un nom d'utilisateur qui gardera quelqu'un connecté tout au long de l'application), mais ce n'est pas le raccourci ultime pour transmettre les accessoires aux composants enfants.
Cependant, useContext nous permet de transmettre des données sans transmettre directement des accessoires et est donc extrêmement utile lorsque nous rencontrons des données auxquelles plusieurs composants enfants doivent accéder ou qui doivent être mises à disposition dans l'intégralité de l'application.

Pour que useContext soit opérationnel, nous devons suivre deux étapes : d'abord, nous devons créer un objet contextuel ("createContext"), puis nous devons accéder à la valeur via un fournisseur à l'aide du hook "useContext". .

Les exemples suivants ont été simplifiés afin de vous donner une meilleure idée de ce qu'est useContext et de comment l'utiliser, mais vous devez savoir que createContext est souvent déclaré dans un fichier distinct. Cependant, je compare « Parent.js » à un fichier « App.js » typique (un composant situé au sommet de la hiérarchie des composants). Parent.js est l'endroit où j'ai défini toutes mes variables d'état, les fonctions qui mettent à jour ces variables d'état et effectué des récupérations dans la base de données à l'aide de useEffect. J'ai choisi de déclarer createContext dans mon composant de niveau supérieur au lieu de créer son propre fichier pour simplifier cette explication afin que vous puissiez mieux comprendre les concepts fondamentaux de Context.

Cela dit, commençons par le tout début : createContext !

1. La première chose que nous devons faire est de déclarer et d'exporter une variable appelée « Contexte » que nous utiliserons plus tard dans nos composants enfants [nous créons une variable maintenant afin de rendre notre code plus simple et ainsi nous pouvons placer une valeur (données) à l'intérieur pour y accéder plus tard] :

export Context = React.createContext();

« Contexte » est un objet contextuel créé en appelant « createContext ». L'objet contextuel contient un composant appelé Provider que nous allons désormais pouvoir appeler puis transmettre les variables et fonctions que nous souhaitons conserver à notre niveau « global ».

2. Avec notre variable « Contexte », passons maintenant à notre JSX dans l'instruction return. Ici, nous appellerons « Contexte » et l'encapsulerons dans des balises d'ouverture (crochets), et appellerons également Provider comme ceci :

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

Afin de compléter « Context.Provider », nous devons également fournir une valeur à « Provider ». C'est ici que nous passerons un objet avec toutes les variables et fonctions que nous appellerons avec « Contexte » dans les composants enfants :

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

Il est TRÈS IMPORTANT de noter que nous devons placer TOUS les composants enfants qui utiliseront les variables et les fonctions entre les balises. Par exemple:

return(
    
);

Notez que nous n'avons pas besoin de transmettre d'accessoires directement aux composants enfants (comme nous le ferions avec 'useState') tant que nous plaçons les accessoires dans 'value'.

Maintenant que nous avons utilisé createContext et transmis tous nos éléments globaux à « Context.Provider », nous sommes prêts à passer aux composants enfants et à voir comment utiliser « Context ».

3. Passons à un composant enfant qui (pour les besoins de cet exemple) est hébergé dans le fichier "Child.js". Comme c'est la vie avec le codage : si vous voulez utiliser quelque chose, vous devez l'importer. Allons-y et récupérons « Contexte » à partir de l'endroit où nous l'avons déclaré dans « Parent.js » afin que nous puissions l'utiliser dans ce composant enfant (« Child.js ») :

import Context from ‘./Parent.js’;

4. Maintenant que nous avons accès à « Contexte » dans le composant enfant, nous devons maintenant importer « useContext » dans le fichier afin de pouvoir lui transmettre « Contexte » (plus d'informations à ce sujet sous peu) :

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

5. Génial ! Utilisons maintenant 'useContext'. Nous devons d’abord déclarer une variable avec laquelle utiliser « useContext ». Nous ferons cela à l’intérieur du composant de la même manière que nous déclarerions useState :

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

function Child(){
    const { example, setExample } = useContext(Context)

    // The rest of our code

Dans ce code, nous utilisons des accolades {} pour désigner une affectation de déstructuration. C'est une façon élégante de dire que nous pouvons appeler plusieurs variables et fonctions stockées dans Context. Nous passons également « Context » à « useContext » afin que nous puissions accéder aux valeurs définies dans Context.Provider (que nous avons déclarées dans « Parent.js »).



6. Croyez-le ou non, vous êtes prêt ! Vous pouvez maintenant utiliser les valeurs de contexte dans votre code comme vous le feriez normalement avec State. Par exemple:

const expId = example.id;

ou

setExample(newExample);

Récapitulons :

Félicitations! Vous disposez désormais de tous les outils pour démarrer avec createContext et useContext. Vous comprenez que useContext vous permet de créer une sorte d'« état global » qui peut transmettre des variables et des fonctions aux composants sans transmettre d'accessoires directement via les composants enfants.

Nous avons également examiné les six étapes nécessaires pour faire fonctionner le contexte dans vos applications. Vous êtes maintenant prêt à commencer à coder avec createContext et useContext, mais si jamais vous avez besoin d'un guide de démarrage rapide, c'est parti :

Dans votre composant parent, déclarez et exportez une variable appelée « Contexte » à l'aide de « createContext » :

export const Context = React.createContext();

Dans le JSX du composant parent, enveloppez tous les composants enfants qui ont besoin d'accéder au contexte dans Context.Proivder et transmettez toutes les variables/fonctions à l'intérieur d'un objet :

   //Child components

Dans votre composant enfant, importez 'useContext' :

import React, { useContext } from ‘react’;

Importez également « Contexte » depuis le composant parent :

import Context from “./Parent.js’;

Utilisez ensuite useContext et transmettez-lui votre variable 'Context' :

const { example, handleExample } = useContext(Context);

Enfin, utilisez le contexte auquel vous avez maintenant accès (dans nos exemples ci-dessus, ce serait « exemple » et « handleExample »), mais vous devez le faire dans le composant enfant.

Bien joué! Et jusqu'à la prochaine fois, bon codage !

Une dernière remarque, si vous souhaitez approfondir ce sujet, voici les ressources de documentation officielles que j'ai également référencées lors de l'apprentissage de useContext et de la rédaction de ce blog :

Documentation officielle :
https://react.dev/reference/react/createContext

Documentation officielle héritée, toujours quelque peu utile pour comprendre useContext :https://legacy.reactjs.org/docs/context.html