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/useMemo.md
+12-14Lines changed: 12 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1059,11 +1059,9 @@ Gardez à l'esprit qu'il vous faut exécuter React en mode production, désactiv
1059
1059
1060
1060
---
1061
1061
1062
-
{/* FIXME:L10N*/}
1062
+
### Empêcher qu’un Effet ne soit déclenché trop souvent {/*preventing-an-effect-from-firing-too-often*/}
1063
1063
1064
-
### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/}
1065
-
1066
-
Sometimes, you might want to use a value inside an [Effect:](/learn/synchronizing-with-effects)
1064
+
Il peut arriver que vous ayez besoin d'utiliser une valeur au sein d'un [Effet](/learn/synchronizing-with-effects) :
1067
1065
1068
1066
```js {4-7,10}
1069
1067
functionChatRoom({ roomId }) {
@@ -1080,19 +1078,19 @@ function ChatRoom({ roomId }) {
1080
1078
// ...
1081
1079
```
1082
1080
1083
-
This creates a problem. [Every reactive value must be declared as a dependency of your Effect.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) However, if you declare`options`as a dependency, it will cause your Effect to constantly reconnect to the chat room:
1081
+
Ce genre de cas pose problème. [Chaque valeur réactive doit être déclarée comme dépendance de votre Effet](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency). Seulement voilà, si vous déclarez`options`comme dépendance, votre Effet va passer son temps à se reconnecter au salon de discussion :
1084
1082
1085
1083
1086
1084
```js {5}
1087
1085
useEffect(() => {
1088
1086
constconnection=createConnection(options);
1089
1087
connection.connect();
1090
1088
return () =>connection.disconnect();
1091
-
}, [options]); // 🔴 Problem: This dependency changes on every render
1089
+
}, [options]); // 🔴 Souci : cette dépendance change à chaque rendu
1092
1090
// ...
1093
1091
```
1094
1092
1095
-
To solve this, you can wrap the object you need to call from an Effect in`useMemo`:
1093
+
Pour éviter ça, vous pouvez enrober l'objet que vous avez besoin d'utiliser dans l'Effet par un`useMemo`:
1096
1094
1097
1095
```js {4-9,16}
1098
1096
functionChatRoom({ roomId }) {
@@ -1103,39 +1101,39 @@ function ChatRoom({ roomId }) {
1103
1101
serverUrl:'https://localhost:1234',
1104
1102
roomId: roomId
1105
1103
};
1106
-
}, [roomId]); // ✅ Only changes when roomId changes
1104
+
}, [roomId]); // ✅ Ne change que si `roomId` change
1107
1105
1108
1106
useEffect(() => {
1109
1107
constoptions=createOptions();
1110
1108
constconnection=createConnection(options);
1111
1109
connection.connect();
1112
1110
return () =>connection.disconnect();
1113
-
}, [options]); // ✅ Only changes when createOptions changes
1111
+
}, [options]); // ✅ Ne change que si `options` change
1114
1112
// ...
1115
1113
```
1116
1114
1117
-
This ensures that the`options`object is the same between re-renders if `useMemo`returns the cached object.
1115
+
Ça garantit que l'objet`options`restera le même d'un rendu à l'autre puisque `useMemo`renverra l'objet mis en cache.
1118
1116
1119
-
However, since`useMemo`is performance optimization, not a semantic guarantee, React may throw away the cached value if [there is a specific reason to do that](#caveats). This will also cause the effect to re-fire, **so it's even better to remove the need for a function dependency** by moving your object *inside* the Effect:
1117
+
Ceci étant dit, puisque`useMemo`est une optimisation de performances, pas une garantie sémantique, React est susceptible de jeter la version mise en cache s'il a [une raison précise de le faire](#caveats). Ça entraînera une ré-exécution de votre Effet, **de sorte qu'il serait encore mieux d'éliminer le besoin d'une dépendance vers l'objet**, en créant l'objet *dans* l'Effet :
1120
1118
1121
1119
```js {5-8,13}
1122
1120
functionChatRoom({ roomId }) {
1123
1121
const [message, setMessage] =useState('');
1124
1122
1125
1123
useEffect(() => {
1126
-
constoptions= { // ✅ No need for useMemo or object dependencies!
1124
+
constoptions= { // ✅ Plus besoin de useMemo ou de dépendances sur objets !
1127
1125
serverUrl:'https://localhost:1234',
1128
1126
roomId: roomId
1129
1127
}
1130
1128
1131
1129
constconnection=createConnection(options);
1132
1130
connection.connect();
1133
1131
return () =>connection.disconnect();
1134
-
}, [roomId]); // ✅ Only changes when roomId changes
1132
+
}, [roomId]); // ✅ Ne change que si `roomId` change
1135
1133
// ...
1136
1134
```
1137
1135
1138
-
Now your code is simpler and doesn't need `useMemo`. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
1136
+
À présent votre code est plus simple et n'a plus besoin de `useMemo`. [Apprenez-en davantage sur l'allègement des dépendances d'un Effet](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect).
1139
1137
1140
1138
### Mémoïser une dépendance d'un autre Hook {/*memoizing-a-dependency-of-another-hook*/}
Copy file name to clipboardExpand all lines: src/content/reference/react/useReducer.md
+1-4Lines changed: 1 addition & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -51,15 +51,12 @@ function MyComponent() {
51
51
52
52
#### Limitations et points à noter {/*caveats*/}
53
53
54
-
{/* FIXME:L10N (2nd item) */}
55
-
56
54
* `useReducer` est un Hook, vous ne pouvez donc l'appeler **qu'au niveau racine de votre composant** ou de vos propres Hooks. Vous ne pouvez pas l'appeler dans des boucles ou des conditions. Si vous avez besoin de le faire, extrayez un nouveau composant et déplacez-y l'état.
57
55
58
-
* The `dispatch`function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
56
+
* La fonction `dispatch`a une identité stable, elle ne figure donc généralement pas dans les dépendances des Effets, mais l'inclure n'entraînera pas un déclenchement d'Effet superflu. Si le *linter* vous permet de l'omettre sans erreurs, c'est que cette omission est sans danger. [Apprenez-en davantage sur l'allègement des dépendances d'Effets](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
59
57
60
58
* En Mode Strict, React **appellera deux fois votre réducteur et votre fonction d'initialisation** afin de [vous aider à détecter des impuretés accidentelles](#my-reducer-or-initializer-function-runs-twice). Ce comportement est limité au développement et n'affecte pas la production. Si votre réducteur et votre fonction d'initialisation sont pures (ce qui devrait être le cas), ça n'impactera pas votre logique. Le résultat de l'un des appels est ignoré.
Copy file name to clipboardExpand all lines: src/content/reference/react/useState.md
+1-3Lines changed: 1 addition & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -79,15 +79,13 @@ Les fonctions de mise à jour (celles renvoyées par `useState`) n'ont pas de va
79
79
80
80
#### Limitations et points à noter {/*setstate-caveats*/}
81
81
82
-
{/* FIXME:L10N (4th item) */}
83
-
84
82
* La fonction de mise à jour **ne met à jour que les variables d'état pour le *prochain* rendu**. Si vous lisez la variable d'état après avoir appelé la fonction de mise à jour, [vous obtiendrez la même ancienne valeur](#ive-updated-the-state-but-logging-gives-me-the-old-value) qui était sur votre écran avant l'appel.
85
83
86
84
* Si la nouvelle valeur que vous donnez est identique au `state` actuel, en comparant au moyen de [`Object.is`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is), React **ne fera pas un nouveau rendu de ce composant et de ses enfants**. Il s'agit d'une optimisation. Même si, dans certains cas, React a tout de même besoin d'appeler votre composant sans faire de rendu de ses enfants, ça ne devrait pas affecter votre code.
87
85
88
86
* React [met à jour les états par lots](/learn/queueing-a-series-of-state-updates). Il met à jour l'écran **après que tous les gestionnaires d'événements ont été lancés** et qu'ils auront appelé leurs fonctions de mise à jour. Ça évite des rendus inutiles suite à un unique événement. Dans les rares cas où vous auriez besoin de forcer React à mettre à jour l'écran plus tôt, par exemple pour accéder au DOM, vous pouvez utiliser [`flushSync`](/reference/react-dom/flushSync).
89
87
90
-
* The `set` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
88
+
* La fonction de mise à jour a une identité stable, elle ne figure donc généralement pas dans les dépendances des Effets, mais l'inclure n'entraînera pas un déclenchement d'Effet superflu. Si le *linter* vous permet de l'omettre sans erreurs, c'est que cette omission est sans danger. [Apprenez-en davantage sur l'allègement des dépendances d'Effets](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
91
89
92
90
* Il est possible d'appeler la fonction de mise à jour *pendant le rendu*, mais uniquement au sein du composant en cours de rendu. React ignorera le JSX résultat pour refaire immédiatement un rendu avec le nouvel état. Cette approche est rarement nécessaire, mais vous pouvez l'utiliser pour **stocker des informations des précédents rendus**. [Voir un exemple ci-dessous](#storing-information-from-previous-renders).
Copy file name to clipboardExpand all lines: src/content/reference/react/useTransition.md
+1-3Lines changed: 1 addition & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -74,15 +74,13 @@ function TabContainer() {
74
74
75
75
#### Limitations et points à noter {/*starttransition-caveats*/}
76
76
77
-
{/* FIXME:L10N (4th item) */}
78
-
79
77
*`useTransition` est un Hook, il ne peut donc être appelé qu'au sein de composants ou de Hooks personnalisés. Si vous avez besoin de démarrer une Transition à un autre endroit (par exemple, depuis une bibliothèque de gestion de données), utilisez plutôt la fonction autonome [`startTransition`](/reference/react/startTransition).
80
78
81
79
* Vous pouvez enrober une mise à jour dans une Transition uniquement si vous avez accès à la fonction `set` de l'état en question. Si vous souhaitez démarrer une Transition en réaction à une prop ou à la valeur renvoyée par un Hook personnalisé, utilisez plutôt [`useDeferredValue`](/reference/react/useDeferredValue).
82
80
83
81
* La fonction que vous passez à `startTransition` doit être synchrone. React exécute cette fonction immédiatement, et marque toutes les mises à jour demandées lors de son exécution comme des Transitions. Si vous essayez de faire des mises à jour d'état plus tard (par exemple avec un timer), elles ne seront pas marquées comme des Transitions.
84
82
85
-
*The `startTransition`function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
83
+
*La fonction `startTransition`a une identité stable, elle ne figure donc généralement pas dans les dépendances des Effets, mais l'inclure n'entraînera pas un déclenchement d'Effet superflu. Si le *linter* vous permet de l'omettre sans erreurs, c'est que cette omission est sans danger. [Apprenez-en davantage sur l'allègement des dépendances d'Effets](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
86
84
87
85
* Une mise à jour d'état marquée comme une Transition pourra être interrompue par d'autres mises à jour d'état. Par exemple, si vous mettez à jour un composant de graphe au sein d'une Transition, mais commencez alors une saisie dans un champ texte tandis que le graphe est en train de refaire son rendu, React redémarrera le rendu du composant graphe après avoir traité la mise à jour d'état du champ.
Copy file name to clipboardExpand all lines: src/content/reference/rules/components-and-hooks-must-be-pure.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: Les composants et les Hooks doivent être purs
3
3
---
4
4
5
-
{/*TODO: L10N */}
5
+
{/*FIXME:L10N*/}
6
6
7
7
<Intro>
8
8
Pure functions only perform a calculation and nothing more. It makes your code easier to understand, debug, and allows React to automatically optimize your components and Hooks correctly.
Copy file name to clipboardExpand all lines: src/content/reference/rules/index.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: Les règles de React
3
3
---
4
4
5
-
{/*TODO: L10N */}
5
+
{/*FIXME:L10N*/}
6
6
7
7
<Intro>
8
8
Just as different programming languages have their own ways of expressing concepts, React has its own idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications.
Copy file name to clipboardExpand all lines: src/content/reference/rules/react-calls-components-and-hooks.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: React appelle les composants et les Hooks
3
3
---
4
4
5
-
{/*TODO: L10N */}
5
+
{/*FIXME:L10N*/}
6
6
7
7
<Intro>
8
8
React is responsible for rendering components and Hooks when necessary to optimize the user experience. It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user.
0 commit comments