Le crochet de React useContextest un outil puissant pour partager l'état entre les composants sans avoir à transmettre les données à travers une longue chaîne d'accessoires. Avec useContext, vous pouvez facilement partager l'état sur l'ensemble de l'arborescence des composants, ce qui en fait un outil utile pour gérer l'état global.

Dans cet article, nous allons explorer les bases du useContextcrochet et voir comment nous pouvons l'utiliser pour gérer l'état dans nos applications React.

Qu'est-ce que c'est useContext?

useContextest un crochet React intégré qui vous permet de consommer des données à partir d'un contexte qui a été créé par un composant parent. Un contexte est un objet qui contient des données d'état partagées accessibles à tout composant descendant du composant qui a créé le contexte.

Le useContextcrochet prend un objet de contexte comme argument et renvoie la valeur actuelle de ce contexte. Cela signifie que toute mise à jour du contexte déclenchera automatiquement un nouveau rendu de tous les composants qui le consomment.

Comment utiliser useContext?

Pour utiliser useContext, nous devons d'abord créer un objet de contexte. Nous pouvons le faire en utilisant la createContextméthode de la Reactbibliothèque. Voici un exemple :

import React from 'react';

const MyContext = React.createContext();

import React from 'react';

const MyContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <div>
        <h1>Count: {count}</h1>
        <Counter />
      </div>
    </MyContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = React.useContext(MyContext);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Le Appcomposant encapsule ses composants enfants dans le MyContext.Providercomposant et transmet la valeur actuelle de l'état partagé en tant que valueprop. Dans ce cas, la valeur est un objet contenant l' countétat et la setCountfonction.

Le Countercomposant consomme l' MyContextobjet à l'aide du useContexthook et extrait l' countétat et la setCountfonction de l'objet de contexte. Nous utilisons ensuite la incrementfonction pour mettre à jour l'état partagé lorsque le bouton est cliqué.

Quand utiliser useContext?

useContextest particulièrement utile pour gérer l'état global auquel plusieurs composants doivent accéder dans l'application. C'est un bon choix pour les cas où le forage d'accessoires serait fastidieux ou lorsque vous souhaitez éviter de passer l'état à travers plusieurs couches de composants.

useContextest également un bon choix pour les cas où vous devez transmettre des fonctions à travers l'arborescence des composants. En transmettant une fonction via l'objet de contexte, vous pouvez éviter d'avoir à la transmettre via plusieurs couches de composants.

Conclusion

Le useContextcrochet est un outil puissant pour gérer l'état global.

J'espère que cela vous expliquera tous.