Skip to content

Commit

Permalink
l10n: translate quick new blocks
Browse files Browse the repository at this point in the history
  • Loading branch information
tdd committed Oct 18, 2024
1 parent a45583e commit 90edd4b
Show file tree
Hide file tree
Showing 8 changed files with 19 additions and 28 deletions.
26 changes: 12 additions & 14 deletions src/content/reference/react/useMemo.md
Original file line number Diff line number Diff line change
Expand Up @@ -1059,11 +1059,9 @@ Gardez à l'esprit qu'il vous faut exécuter React en mode production, désactiv

---

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

### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/}

Sometimes, you might want to use a value inside an [Effect:](/learn/synchronizing-with-effects)
Il peut arriver que vous ayez besoin d'utiliser une valeur au sein d'un [Effet](/learn/synchronizing-with-effects) :

```js {4-7,10}
function ChatRoom({ roomId }) {
Expand All @@ -1080,19 +1078,19 @@ function ChatRoom({ roomId }) {
// ...
```
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:
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 :
```js {5}
useEffect(() => {
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [options]); // 🔴 Problem: This dependency changes on every render
}, [options]); // 🔴 Souci : cette dépendance change à chaque rendu
// ...
```
To solve this, you can wrap the object you need to call from an Effect in `useMemo`:
Pour éviter ça, vous pouvez enrober l'objet que vous avez besoin d'utiliser dans l'Effet par un `useMemo` :
```js {4-9,16}
function ChatRoom({ roomId }) {
Expand All @@ -1103,39 +1101,39 @@ function ChatRoom({ roomId }) {
serverUrl: 'https://localhost:1234',
roomId: roomId
};
}, [roomId]); //Only changes when roomId changes
}, [roomId]); //Ne change que si `roomId` change

useEffect(() => {
const options = createOptions();
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [options]); //Only changes when createOptions changes
}, [options]); //Ne change que si `options` change
// ...
```
This ensures that the `options` object is the same between re-renders if `useMemo` returns the cached object.
Ça garantit que l'objet `options` restera le même d'un rendu à l'autre puisque `useMemo` renverra l'objet mis en cache.
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:
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 :
```js {5-8,13}
function ChatRoom({ roomId }) {
const [message, setMessage] = useState('');

useEffect(() => {
const options = { //No need for useMemo or object dependencies!
const options = { //Plus besoin de useMemo ou de dépendances sur objets !
serverUrl: 'https://localhost:1234',
roomId: roomId
}

const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [roomId]); //Only changes when roomId changes
}, [roomId]); //Ne change que si `roomId` change
// ...
```
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)
À 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).
### Mémoïser une dépendance d'un autre Hook {/*memoizing-a-dependency-of-another-hook*/}
Expand Down
5 changes: 1 addition & 4 deletions src/content/reference/react/useReducer.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,12 @@ function MyComponent() {
#### Limitations et points à noter {/*caveats*/}
{/* FIXME:L10N (2nd item) */}
* `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.
* 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)
* 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)
* 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é.
---
### Fonction `dispatch` {/*dispatch*/}
Expand Down
4 changes: 1 addition & 3 deletions src/content/reference/react/useState.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,15 +79,13 @@ Les fonctions de mise à jour (celles renvoyées par `useState`) n'ont pas de va
#### Limitations et points à noter {/*setstate-caveats*/}
{/* FIXME:L10N (4th item) */}
* 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.
* 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.
* 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).
* 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)
* 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)
* 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).
Expand Down
4 changes: 1 addition & 3 deletions src/content/reference/react/useTransition.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,15 +74,13 @@ function TabContainer() {

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

{/* FIXME:L10N (4th item) */}

* `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).

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

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

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

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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Les composants et les Hooks doivent être purs
---

{/* TODO: L10N */}
{/* FIXME:L10N */}

<Intro>
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.
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/rules/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Les règles de React
---

{/* TODO: L10N */}
{/* FIXME:L10N */}

<Intro>
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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: React appelle les composants et les Hooks
---

{/* TODO: L10N */}
{/* FIXME:L10N */}

<Intro>
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.
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/rules/rules-of-hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Les règles des Hooks
---

{/* TODO: L10N */}
{/* FIXME:L10N */}

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

0 comments on commit 90edd4b

Please sign in to comment.