Merge pull request #670 from reactjs/l10n-fr-new-pages

l10n: first batch of translations for new contents

Author: tdd

src/content/blog/2024/05/22/react-conf-2024-recap.md

@@ -2,36 +2,36 @@
 title: act
 ---
 
-{/* FIXME:L10N */}
-
 <Intro>
 
-`act` is a test helper to apply pending React updates before making assertions.
+`act` est un utilitaire de test pour appliquer les mises à jour React en attente avant d'exécuter vos assertions.
 
 ```js
 await act(async actFn)
 ```
 
 </Intro>
 
-To prepare a component for assertions, wrap the code rendering it and performing updates inside an `await act()` call. This makes your test run closer to how React works in the browser.
+Pour préparer un composant à vos assertions, enrobez le code qui en fait le rendu et exécute des mises à jour par un appel `await act()`.  Votre test aura ainsi un comportement plus proche du véritable fonctionnement de React au sein d'un navigateur.
 
 <Note>
-You might find using `act()` directly a bit too verbose. To avoid some of the boilerplate, you could use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), whose helpers are wrapped with `act()`.
+
+Vous estimerez peut-être que le recours direct à `act()` est un peu verbeux.  Pour éviter en partie ce code générique, vous pourriez utiliser une bibliothèque telle que [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), dont les utilitaires s'appuient déjà sur `act()`.
+
 </Note>
 
 
 <InlineToc />
 
 ---
 
-## Reference {/*reference*/}
+## Référence {/*reference*/}
 
 ### `await act(async actFn)` {/*await-act-async-actfn*/}
 
-When writing UI tests, tasks like rendering, user events, or data fetching can be considered as “units” of interaction with a user interface. React provides a helper called `act()` that makes sure all updates related to these “units” have been processed and applied to the DOM before you make any assertions.
+Lors de l'écriture de tests pour votre interface utilisateur (UI), des tâches telles que le rendu, les événements utilisateurs ou le chargement de données sont considérées comme des « unités » d'interaction avec l'interface.  React fournit un utilitaire appelé `act()` pour garantir que les mises à jour liées à ces « unités » ont bien été traitées et appliquées au DOM avant que vous n'exécutiez vos assertions.
 
-The name `act` comes from the [Arrange-Act-Assert](https://wiki.c2.com/?ArrangeActAssert) pattern.
+Le nom `act` vient de l'approche [Arrange-Act-Assert](https://wiki.c2.com/?ArrangeActAssert).
 
 ```js {2,4}
 it ('renders with button disabled', async () => {
@@ -44,25 +44,25 @@ it ('renders with button disabled', async () => {
 
 <Note>
 
-We recommend using `act` with `await` and an `async` function. Although the sync version works in many cases, it doesn't work in all cases and due to the way React schedules updates internally, it's difficult to predict when you can use the sync version.
+Nous conseillons d'utiliser `act` avec un `await` dans une fonction `async`.  Même si la version synchrone fonctionne dans de nombreux cas, elle ne couvre pas tous les scénarios ; en raison de la façon dont React planifie les mises à jour en interne, il est difficile de prédire si vous pouvez utiliser la version synchrone sans risque.
 
-We will deprecate and remove the sync version in the future.
+Nous déprécierons puis retirerons la version synchrone à l'avenir.
 
 </Note>
 
-#### Parameters {/*parameters*/}
+#### Paramètres {/*parameters*/}
 
-* `async actFn`: An async function wrapping renders or interactions for components being tested. Any updates triggered within the `actFn`, are added to an internal act queue, which are then flushed together to process and apply any changes to the DOM. Since it is async, React will also run any code that crosses an async boundary, and flush any updates scheduled.
+* `async actFn` : une fonction asynchrone qui enrobe les rendus et interactions avec le composant que vous allez tester.  Toute mise à jour déclenchée au sein de `actFn` est ajoutée à une file interne dédiée, qui est déroulée d'un bloc pour traitement, et ses résultats appliqués au DOM.  Dans la mesure où elle est asynchrone, React pourra exécuter tout code asynchrone et appliquer les mises à jour qui en résultent.
 
-#### Returns {/*returns*/}
+#### Valeur renvoyée {/*returns*/}
 
-`act` does not return anything.
+`act` ne renvoie rien.
 
-## Usage {/*usage*/}
+## Utilisation {/*usage*/}
 
-When testing a component, you can use `act` to make assertions about its output.
+Lors de tests d'un composant, vous pouvez utiliser `act` pour exprimer des assertions sur le résultat.
 
-For example, let’s say we have this `Counter` component, the usage examples below show how to test it:
+Par exemple, disons que vous avez le composant `Counter` suivant, les exemples d'utilisation ci-dessous illustreront comment le tester :
 
 ```js
 function Counter() {
@@ -72,23 +72,23 @@ function Counter() {
   }
 
   useEffect(() => {
-    document.title = `You clicked ${this.state.count} times`;
+    document.title = `Vous avez cliqué ${this.state.count} fois`;
   }, [count]);
 
   return (
     <div>
-      <p>You clicked {this.state.count} times</p>
+      <p>Vous avez cliqué {this.state.count} fois</p>
       <button onClick={this.handleClick}>
-        Click me
+        Cliquez ici
       </button>
     </div>
   )
 }
 ```
 
-### Rendering components in tests {/*rendering-components-in-tests*/}
+### Faire le rendu de composants dans nos tests {/*rendering-components-in-tests*/}
 
-To test the render output of a component, wrap the render inside `act()`:
+Pour tester le résultat du rendu d'un composant, enrobez son rendu dans `act()` :
 
 ```js  {10,12}
 import {act} from 'react';
@@ -98,26 +98,26 @@ import Counter from './Counter';
 it('can render and update a counter', async () => {
   container = document.createElement('div');
   document.body.appendChild(container);
-  
-  // ✅ Render the component inside act().
+
+  // ✅ Fait le rendu du composant au sein d'un `act()`.
   await act(() => {
     ReactDOMClient.createRoot(container).render(<Counter />);
   });
-  
+
   const button = container.querySelector('button');
   const label = container.querySelector('p');
-  expect(label.textContent).toBe('You clicked 0 times');
-  expect(document.title).toBe('You clicked 0 times');
+  expect(label.textContent).toBe('Vous avez cliqué 0 fois');
+  expect(document.title).toBe('Vous avez cliqué 0 fois');
 });
 ```
 
-Here, we create a container, append it to the document, and render the `Counter` component inside `act()`. This ensures that the component is rendered and its effects are applied before making assertions.
+Dans ce code, nous créons un conteneur, l'ajoutons au document, puis faisons le rendu du composant `Counter` au sein d'un appel `act()`. Ça garantit que le composant a bien été rendu et ses Effets appliqués avant de passer aux assertions.
 
-Using `act` ensures that all updates have been applied before we make assertions.
+Le recours à `act()` garantit que toute mise à jour a bien été appliquée avant d'exécuter nos assertions.
 
-### Dispatching events in tests {/*dispatching-events-in-tests*/}
+### Déclencher des événements dans nos tests {/*dispatching-events-in-tests*/}
 
-To test events, wrap the event dispatch inside `act()`:
+Pour tester les événements, enrobez leur déclenchement dans `act()` :
 
 ```js {14,16}
 import {act} from 'react';
@@ -132,48 +132,50 @@ it.only('can render and update a counter', async () => {
     ReactDOMClient.createRoot(container).render(<Counter />);
   });
 
-  // ✅ Dispatch the event inside act().
+  // ✅ Déclenchement d'événement dans `act()`.
   await act(async () => {
     button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
   });
 
   const button = container.querySelector('button');
   const label = container.querySelector('p');
-  expect(label.textContent).toBe('You clicked 1 times');
-  expect(document.title).toBe('You clicked 1 times');
+  expect(label.textContent).toBe('Vous avez cliqué 1 fois');
+  expect(document.title).toBe('Vous avez cliqué 1 fois');
 });
 ```
 
-Here, we render the component with `act`, and then dispatch the event inside another `act()`. This ensures that all updates from the event are applied before making assertions.
+Dans ce code, nous faisons le rendu dans `act()`, puis nous déclenchons un événement dans un autre `act()`.  Ça garantit que toutes les mises à jour qu'aura entraînées l'événement ont bien été appliquées avant de passer aux assertions.
 
 <Pitfall>
 
-Don’t forget that dispatching DOM events only works when the DOM container is added to the document. You can use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to reduce the boilerplate code.
+N'oubliez pas que le déclenchement d'événements DOM ne fonctionne que si le conteneur DOM est bien ajouté au document. Vous pouvez utiliser une bibliothèque telle que [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) pour alléger ce code.
 
 </Pitfall>
 
-## Troubleshooting {/*troubleshooting*/}
+## Dépannage {/*troubleshooting*/}
 
-### I'm getting an error: "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
+### J'ai une erreur : "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
 
-Using `act` requires setting `global.IS_REACT_ACT_ENVIRONMENT=true` in your test environment. This is to ensure that `act` is only used in the correct environment.
+Le recours à `act` nécessite un réglage `global.IS_REACT_ACT_ENVIRONMENT=true` dans votre environnement de test.  Ça permet de garantir que `act` n'est utilisé que dans un environnement adapté.
 
-If you don't set the global, you will see an error like this:
+Si vous n'avez pas défini cette globale, vous obtiendrez l'erreur suivante :
 
 <ConsoleBlock level="error">
 
 Warning: The current testing environment is not configured to support act(...)
 
 </ConsoleBlock>
 
-To fix, add this to your global setup file for React tests:
+_(« Avertissement : l'environnement de test actuel n'est pas configuré pour prendre en charge act(...) », NdT)_
+
+Pour la corriger, ajouter le code suivant dans le fichier de mise en place globale de vos tests React :
 
 ```js
 global.IS_REACT_ACT_ENVIRONMENT=true
 ```
 
 <Note>
 
-In testing frameworks like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), `IS_REACT_ACT_ENVIRONMENT` is already set for you.
+Les bibliothèques telles que [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) s'assurent que `IS_REACT_ACT_ENVIRONMENT` est déjà défini pour vous.
 
 </Note>

src/content/reference/react/act.md

@@ -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 }) {
@@ -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 }) {
@@ -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*/}
 

src/content/reference/react/useMemo.md

@@ -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*/}

src/content/reference/react/useReducer.md

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