You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/useContext.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -42,7 +42,7 @@ function MyComponent() {
42
42
43
43
#### Limitations {/*caveats*/}
44
44
45
-
* L'appel à `useContext()` dans un composant n'est pas affecté par les fournisseurs renvoyés par le *même* composant. Le `<Context.Provider>` correspondant **doit être *au-dessus*** du composant qui appelle le `useContext()`.
45
+
* L'appel à `useContext()` dans un composant n'est pas affecté par les fournisseurs renvoyés par le *même* composant. Le `<Context.Provider>` correspondant **doit figurer *au-dessus*** du composant qui appelle le Hook`useContext()`.
46
46
* React **fait automatiquement le rendu** de tous les enfants qui utilisent un contexte spécifique, en commençant par le fournisseur qui reçoit une `value` différente. La valeur précédente et la suivante sont comparées avec [`Object.is`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Sauter des rendus avec [`memo`](/reference/react/memo) n'empêche pas les enfants de recevoir une nouvelle valeur de contexte.
47
47
* Le contexte peut être cassé si votre système de construction produit des modules dupliqués en sortie (ce qui peut arriver avec les liens symboliques). Passer quelque chose *via* le contexte ne marche que si le `SomeContext` que vous avez utilisé pour fournir le contexte et le `SomeContext` que vous utilisez pour le lire sont ***exactement* le même objet**, ce qui est déterminé par une comparaison `===`.
48
48
@@ -60,7 +60,7 @@ import { useContext } from 'react';
60
60
61
61
functionButton() {
62
62
consttheme=useContext(ThemeContext);
63
-
// ...
63
+
// ...
64
64
```
65
65
66
66
`useContext` renvoie la <CodeStep step={2}>valeur du contexte</CodeStep> pour le <CodeStep step={1}>contexte</CodeStep> que vous avez passé. Pour définir la valeur du contexte, React remonte dans l'arbre des composants à la recherche du **fournisseur de contexte le plus proche** pour ce contexte particulier.
@@ -305,7 +305,7 @@ Remarquez que `value="dark"` passe la chaîne de caractères `"dark"`, mais que
305
305
306
306
#### Mettre à jour un objet *via* le contexte {/*updating-an-object-via-context*/}
307
307
308
-
Dans cet exemple, il y a une variable d'état `currentUser` qui contient un objet. Vous combinez `{ currentUser, setCurrentUser }` en un seul objet que vous transmettez au contexte à l'intérieur de `value={}`. Ça permet à n'importe quel composant plus bas, tel que `LoginButton`, de lire `currentUser` et `setCurrentUser`, et ainsi appeler `setCurrentUser` si nécessaire.
308
+
Dans cet exemple, il y a une variable d'état `currentUser` qui contient un objet. Vous combinez `{ currentUser, setCurrentUser }` en un seul objet que vous transmettez au contexte à l'intérieur de `value={}`. Ça permet à n'importe quel composant situé plus bas dans l'arbre, tel que `LoginButton`, de lire `currentUser` et `setCurrentUser`, et ainsi appeler `setCurrentUser` si nécessaire.
309
309
310
310
<Sandpack>
311
311
@@ -845,7 +845,7 @@ export default function AddTask() {
Ici, la <CodeStep step={2}>valeur de contexte</CodeStep> est un objet JavaScript avec deux propriétés, dont l'une est une fonction. À chaque fois que `MyApp` fait son rendu (par exemple lors d'un changement de route), ce sera un objet *différent* pointant vers une fonction *différente*, React devra donc refaire le rendu de tous les composants situés en profondeur dans l'arbre qui appellent `useContext(AuthContext)`.
1313
1313
1314
-
Ce n'est pas un problème pour les petites applis. Cependant, il est inutile de faire le rendu si les données sous-jacentes, comme `currentUser`, n'ont pas changé. Pour aider React à tirer parti de ça, vous pouvez enrober la fonction `login` dans un [`useCallback`](/reference/react/useCallback) et la création de l'objet dans un [`useMemo`](/reference/react/useMemo). C'est une optimisation de performances :
1314
+
Ce n'est pas un problème pour les petites applis. Cependant, il est inutile de faire le rendu si les données sous-jacentes, comme `currentUser`, n'ont pas changé. Pour aider React à tirer parti de ça, vous pouvez enrober la fonction `login` dans un Hook [`useCallback`](/reference/react/useCallback) et la création de l'objet dans un Hook [`useMemo`](/reference/react/useMemo). C'est une optimisation de performances :
0 commit comments