Section courante

A propos

Section administrative du site

useContext

 Contexte utilisateur
React

Syntaxe

const value = useContext(SomeContext)

Description

useContext est un crochet React vous permettant de lire et de vous abonner au contexte de votre composante.

Référence

useContext(SomeContext)

Utilisation

Dépannage

Référence

useContext(SomeContext)

Appelez useContext au niveau supérieur de votre composante pour lire et vous abonner au contexte.

  1. function ProductPage({ productId, referrer, theme }) {
  2.   // Indiquez à React de mettre en cache votre fonction entre les différents rendus...
  3.   const handleSubmit = useCallback((orderDetails) => {
  4.     post('/product/' + productId + '/buy', {
  5.       referrer,
  6.       orderDetails,
  7.     });
  8.   }, [productId, referrer]); // ...donc, tant que ces dépendances ne changent pas...
  9.  
  10.   return (
  11.     <div className={theme}>
  12.       {/* ...La composante ShippingForm recevra les mêmes propriétés et pourra ainsi éviter le re-rendu inutile. */}
  13.       <ShippingForm onSubmit={handleSubmit} />
  14.     </div>
  15.   );
  16. }

Paramètres

Nom Description
SomeContext Le contexte précédemment créé avec createContext. Le contexte lui-même ne contient pas d'informations, il représente uniquement le type d'informations que vous pouvez fournir ou lire à partir des composantes.

Valeurs renvoyées

useContext renvoie la valeur de contexte du composante appelant. Elle est déterminée comme la valeur transmise au SomeContext le plus proche au-dessus de la composante appelant dans l'arborescence. En l'absence de fournisseur de ce type, la valeur renvoyée sera la valeur par défaut (defaultValue) transmise à createContext pour ce contexte. La valeur renvoyée est toujours à jour. React réaffiche automatiquement les composantes qui lisent un contexte si celui-ci change.

Avertissements

L'appel useContext() dans une composante n'est pas affecté par les fournisseurs renvoyés par le même composante. Le <Context> correspondant doit se trouver au-dessus du composante effectuant l'appel useContext().

React réaffiche automatiquement tous les enfants utilisant un contexte particulier, à partir du fournisseur qui reçoit une valeur différente. Les valeurs précédentes et suivantes sont comparées à l'aide de la comparaison Object.is. Ignorer les rendus répétés avec mémo n'empêche pas les enfants de recevoir de nouvelles valeurs de contexte.

Si votre système de build produit des modules dupliqués dans la sortie (ce qui peut arriver avec les liens symboliques), cela peut endommager le contexte. Transférer un élément via le contexte ne fonctionne que si le SomeContext utilisé pour fournir le contexte et le SomeContext utilisé pour le lire sont exactement le même objet, comme déterminé par une comparaison ===.

Utilisation

Transmission de données en profondeur dans l'arborescence.

Appelez useContext au niveau supérieur de votre composante pour lire le contexte et vous y abonner.

  1. import { useContext } from 'react';
  2.  
  3. function Button() {
  4.   const theme = useContext(ThemeContext);
  5.   // ...

useContext renvoie la valeur du contexte que vous avez passé. Pour déterminer cette valeur, React recherche dans l'arborescence des composantes le fournisseur de contexte le plus proche pour ce contexte.

Pour passer un contexte à un bouton, encapsulez-le ou l'un de ses composantes parents dans le fournisseur de contexte correspondant :

  1. function MyPage() {
  2.   return (
  3.     <ThemeContext value="dark">
  4.       <Form />
  5.     </ThemeContext>
  6.   );
  7. }
  8.  
  9. function Form() {
  10.   // ... rend les boutons à l'intérieur ...
  11. }

Le nombre de couches de composantes entre le fournisseur et le bouton n'a aucune importance. Lorsqu'un bouton, n'importe où dans le formulaire, appelle useContext(ThemeContext), il reçoit la valeur «dark».

Piège

useContext() recherche toujours le fournisseur le plus proche au-dessus de la composante qui l'appelle. La recherche est ascendante et ne prend pas en compte les fournisseurs de composante depuis lequel vous appelez useContext().



Dernière mise à jour : Mercredi, le 10 septembre 2025