Skip to content

Commit 90edd4b

Browse files
committed
l10n: translate quick new blocks
1 parent a45583e commit 90edd4b

File tree

8 files changed

+19
-28
lines changed

8 files changed

+19
-28
lines changed

src/content/reference/react/useMemo.md

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1059,11 +1059,9 @@ Gardez à l'esprit qu'il vous faut exécuter React en mode production, désactiv
10591059

10601060
---
10611061

1062-
{/* FIXME:L10N */}
1062+
### Empêcher qu’un Effet ne soit déclenché trop souvent {/*preventing-an-effect-from-firing-too-often*/}
10631063

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) :
10671065

10681066
```js {4-7,10}
10691067
function ChatRoom({ roomId }) {
@@ -1080,19 +1078,19 @@ function ChatRoom({ roomId }) {
10801078
// ...
10811079
```
10821080
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 :
10841082
10851083
10861084
```js {5}
10871085
useEffect(() => {
10881086
const connection = createConnection(options);
10891087
connection.connect();
10901088
return () => connection.disconnect();
1091-
}, [options]); // 🔴 Problem: This dependency changes on every render
1089+
}, [options]); // 🔴 Souci : cette dépendance change à chaque rendu
10921090
// ...
10931091
```
10941092
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` :
10961094
10971095
```js {4-9,16}
10981096
function ChatRoom({ roomId }) {
@@ -1103,39 +1101,39 @@ function ChatRoom({ roomId }) {
11031101
serverUrl: 'https://localhost:1234',
11041102
roomId: roomId
11051103
};
1106-
}, [roomId]); //Only changes when roomId changes
1104+
}, [roomId]); //Ne change que si `roomId` change
11071105

11081106
useEffect(() => {
11091107
const options = createOptions();
11101108
const connection = createConnection(options);
11111109
connection.connect();
11121110
return () => connection.disconnect();
1113-
}, [options]); //Only changes when createOptions changes
1111+
}, [options]); //Ne change que si `options` change
11141112
// ...
11151113
```
11161114
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.
11181116
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 :
11201118
11211119
```js {5-8,13}
11221120
function ChatRoom({ roomId }) {
11231121
const [message, setMessage] = useState('');
11241122

11251123
useEffect(() => {
1126-
const options = { //No need for useMemo or object dependencies!
1124+
const options = { //Plus besoin de useMemo ou de dépendances sur objets !
11271125
serverUrl: 'https://localhost:1234',
11281126
roomId: roomId
11291127
}
11301128

11311129
const connection = createConnection(options);
11321130
connection.connect();
11331131
return () => connection.disconnect();
1134-
}, [roomId]); //Only changes when roomId changes
1132+
}, [roomId]); //Ne change que si `roomId` change
11351133
// ...
11361134
```
11371135
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).
11391137
11401138
### Mémoïser une dépendance d'un autre Hook {/*memoizing-a-dependency-of-another-hook*/}
11411139

src/content/reference/react/useReducer.md

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,12 @@ function MyComponent() {
5151
5252
#### Limitations et points à noter {/*caveats*/}
5353
54-
{/* FIXME:L10N (2nd item) */}
55-
5654
* `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.
5755
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)
5957
6058
* 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é.
6159
62-
6360
---
6461
6562
### Fonction `dispatch` {/*dispatch*/}

src/content/reference/react/useState.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,15 +79,13 @@ Les fonctions de mise à jour (celles renvoyées par `useState`) n'ont pas de va
7979
8080
#### Limitations et points à noter {/*setstate-caveats*/}
8181
82-
{/* FIXME:L10N (4th item) */}
83-
8482
* 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.
8583
8684
* 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.
8785
8886
* 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).
8987
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)
9189
9290
* 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).
9391

src/content/reference/react/useTransition.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,15 +74,13 @@ function TabContainer() {
7474

7575
#### Limitations et points à noter {/*starttransition-caveats*/}
7676

77-
{/* FIXME:L10N (4th item) */}
78-
7977
* `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).
8078

8179
* 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).
8280

8381
* 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.
8482

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)
8684

8785
* 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.
8886

src/content/reference/rules/components-and-hooks-must-be-pure.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Les composants et les Hooks doivent être purs
33
---
44

5-
{/* TODO: L10N */}
5+
{/* FIXME:L10N */}
66

77
<Intro>
88
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.

src/content/reference/rules/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Les règles de React
33
---
44

5-
{/* TODO: L10N */}
5+
{/* FIXME:L10N */}
66

77
<Intro>
88
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.

src/content/reference/rules/react-calls-components-and-hooks.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: React appelle les composants et les Hooks
33
---
44

5-
{/* TODO: L10N */}
5+
{/* FIXME:L10N */}
66

77
<Intro>
88
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.

src/content/reference/rules/rules-of-hooks.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Les règles des Hooks
33
---
44

5-
{/* TODO: L10N */}
5+
{/* FIXME:L10N */}
66

77
<Intro>
88
Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.

0 commit comments

Comments
 (0)