createContext
createContext
vous permet de créer un contexte que des composants peuvent fournir ou lire.
const SomeContext = createContext(defaultValue)
Référence
createContext(defaultValue)
Appelez createContext
en dehors de tout composant afin de créer un contexte.
import { createContext } from 'react';
const ThemeContext = createContext('light');
Voir d’autres exemples ci-dessous.
Paramètres
defaultValue
: la valeur utilisée lorsqu’il n’y a pas de contexte adapté fourni au-dessus du composant qui lit ce contexte. Si vous n’avez pas de valeur par défaut appropriée, indiqueznull
. La valeur par défaut est vue comme un « dernier recours ». Elle est statique et ne change jamais au fil du temps.
Valeur renvoyée
createContext
renvoie un objet représentant le contexte.
L’objet contexte lui-même ne contient aucune information. Il représente quel contexte les autres composants lisent ou fournissent. Vous utiliserez habituellement SomeContext.Provider
dans les composants au-dessus afin de spécifier la valeur du contexte, et vous appellerez useContext(SomeContext)
dans les composants en-dessous afin de lire cette valeur. L’objet contexte a quelques propriétés :
SomeContext.Provider
vous permet de fournir la valeur du contexte aux composants enfants.SomeContext.Consumer
est une façon alternative rarement utilisée de lire la valeur du contexte.
SomeContext.Provider
Enveloppez vos composants dans un fournisseur de contexte afin de définir la valeur de ce contexte pour tous les composants enveloppés :
function App() {
const [theme, setTheme] = useState('light');
// ...
return (
<ThemeContext.Provider value={theme}>
<Page />
</ThemeContext.Provider>
);
}
Props
value
: la valeur que vous souhaitez passer à tous les composants lisant ce contexte à l’intérieur de ce fournisseur, à quelque profondeur que ce soit. La valeur du contexte peut être de n’importe quel type. Un composant appelantuseContext(SomeContext)
à l’intérieur d’un fournisseur de contexte reçoit lavalue
du fournisseur correspondant le plus proche en amont.
SomeContext.Consumer
Avant l’arrivée de useContext
, il existait une ancienne façon de lire un contexte :
function Button() {
// 🟡 Ancienne méthode (déconseillée)
return (
<ThemeContext.Consumer>
{theme => (
<button className={theme} />
)}
</ThemeContext.Consumer>
);
}
Bien que cette ancienne méthode fonctionne toujours, privilégiez la lecture d’un contexte à l’aide de useContext()
dans du nouveau code :
function Button() {
// ✅ Méthode recommandée
const theme = useContext(ThemeContext);
return <button className={theme} />;
}
Props
children
: une fonction. React appellera cette fonction avec la valeur du contexte actuel, déterminée par le même algorithme que pouruseContext()
, puis affichera le résultat renvoyé par cette fonction. De plus, chaque fois que le contexte des composants parents changera, React réexécutera cette fonction et mettra à jour l’interface utilisateur en conséquence.
Utilisation
Création d’un contexte
Le contexte permet aux composants de transmettre des informations en profondeur sans avoir à passer explicitement des props.
Pour créer un ou plusieurs contextes, il suffit d’appeler createContext
en dehors de tout composant.
import { createContext } from 'react';
const ThemeContext = createContext('light');
const AuthContext = createContext(null);
createContext
renvoie un objet contexte. Les composants peuvent lire le contexte en le passant à useContext()
:
function Button() {
const theme = useContext(ThemeContext);
// ...
}
function Profile() {
const currentUser = useContext(AuthContext);
// ...
}
Par défaut, les valeurs reçues seront les valeurs par défaut que vous avez spécifiées lors de la création des contextes. Cependant, ça n’est pas très utile en soi car les valeurs par défaut ne changent jamais.
L’utilité du contexte réside dans la possibilité de fournir des valeurs dynamiques supplémentaires à partir de vos composants :
function App() {
const [theme, setTheme] = useState('dark');
const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });
// ...
return (
<ThemeContext.Provider value={theme}>
<AuthContext.Provider value={currentUser}>
<Page />
</AuthContext.Provider>
</ThemeContext.Provider>
);
}
Désormais, le composant Page
, ainsi que tous les composants imbriqués, quel que soit leur niveau de profondeur, auront accès aux valeurs de contexte transmises. Si ces valeurs de contexte changent, React réexécutera les composants qui les lisent.
Apprenez-en davantage sur la fourniture et la lecture de contexte au travers d’exemples concrets.
Importer et exporter un contexte depuis un fichier
Des composants auront souvent besoin d’accéder au même contexte depuis de multiples fichiers. C’est pourquoi il est courant de déclarer les contextes dans un fichier séparé. Vous pouvez alors utiliser l’instruction export
pour rendre le contexte accessible par d’autres fichiers :
// Contexts.js
import { createContext } from 'react';
export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);
Les composants déclarés dans d’autres fichiers peuvent alors utiliser l’instruction import
pour lire ou fournir ce contexte :
// Button.js
import { ThemeContext } from './Contexts.js';
function Button() {
const theme = useContext(ThemeContext);
// ...
}
// App.js
import { ThemeContext, AuthContext } from './Contexts.js';
function App() {
// ...
return (
<ThemeContext.Provider value={theme}>
<AuthContext.Provider value={currentUser}>
<Page />
</AuthContext.Provider>
</ThemeContext.Provider>
);
}
Ça fonctionne de la même manière que l’importation et l’exportation de composants.
Dépannage
Je ne parviens pas à modifier la valeur du contexte
Un code comme celui-ci spécifie la valeur par défaut du contexte :
const ThemeContext = createContext('light');
Cette valeur ne change jamais. React utilise cette valeur uniquement comme une valeur de secours si aucun fournisseur correspondant n’est trouvé au-dessus du composant lecteur.
Pour mettre à jour le contexte au fil du temps, intégrez un état local et enveloppez vos composants avec un fournisseur de contexte.