Context React

useContext est un hook fourni par la bibliothèque React qui permet d’accéder à un contexte spécifique dans les composants fonctionnels. Les contextes sont utilisés pour partager des données entre plusieurs composants sans avoir à les transmettre manuellement à travers les propriétés.

Voici comment utiliser useContext :

Création du contexte : Tout d’abord, vous devez créer un contexte en utilisant la méthode createContext fournie par React. Cela peut être fait dans un fichier séparé ou dans le même fichier que vos composants.

// Création du contexte
const MonContexte = React.createContext();

Fournir des valeurs au contexte : Ensuite, vous devez envelopper les composants qui ont besoin d’accéder à ce contexte dans un composant fournisseur, en utilisant le composant MonContexte.Provider. Cela permet de définir les valeurs que vous souhaitez partager.

// Fournisseur du contexte
function MonContexteProvider(props) {
const valeurPartagee = "Valeur partagée depuis le contexte";

return (
<MonContexte.Provider value={valeurPartagee}>
{props.children}
</MonContexte.Provider>
);
}

Dans cet exemple, nous avons créé un fournisseur de contexte MonContexteProvider qui enveloppe les composants enfants avec MonContexte.Provider. Nous avons défini une valeur valeurPartagee que nous souhaitons partager avec les composants consommateurs.

Consommer le contexte : Maintenant, vous pouvez accéder à la valeur du contexte à l’intérieur des composants fonctionnels en utilisant useContext.

function MonComposant() {
const valeurContexte = useContext(MonContexte);

return <div>{valeurContexte}</div>;
}

Dans cet exemple, useContext(MonContexte) renvoie la valeur partagée du contexte MonContexte. Vous pouvez utiliser cette valeur comme bon vous semble dans votre composant.

Utiliser le contexte : Vous pouvez maintenant utiliser MonComposant dans votre application, en vous assurant que les composants sont enveloppés dans MonContexteProvider pour que le contexte soit accessible.

function App() {
return (
<MonContexteProvider>
<MonComposant />
</MonContexteProvider>
);
}

Dans cet exemple, MonComposant aura accès à la valeur partagée du contexte MonContexte, car il est enveloppé dans MonContexteProvider.

En résumé, useContext est un hook de React qui permet aux composants fonctionnels d’accéder à des contextes spécifiques. Il est utilisé pour partager des données entre plusieurs composants sans avoir à les transmettre manuellement à travers les propriétés.