Apply suggestions from code review

Co-authored-by: Christophe Porteneuve <[email protected]>

src/content/reference/react/lazy.md

@@ -4,7 +4,7 @@ title: lazy
 
 <Intro>
 
-`lazy` vous permet de différer le chargement du composant jusqu'à son affichage pour la première fois.
+`lazy` vous permet de différer le chargement du code d'un composant jusqu'à son premier affichage effectif.
 
 ```js
 const SomeComponent = lazy(load)
@@ -20,43 +20,43 @@ const SomeComponent = lazy(load)
 
 ### `lazy(load)` {/*lazy*/}
 
-Appelez `lazy` en dehors de vos composants pour déclarer un composant React lazy-loaded:
+Appelez `lazy` en-dehors de vos composants pour déclarer un composant React chargé à la demande :
 
 ```js
 import { lazy } from 'react';
 
 const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 ```
 
-[Voir les exemples ci-dessous.](#usage)
+[Voir d'autres exemples ci-dessous](#usage).
 
 #### Paramètres {/*parameters*/}
 
-* `load`: Une fonction qui renvoie une [Promesse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou d'autres *thenable* (un objet de promesse résolue avec la méthode `then`). React n'appelera pas `load` avant la première fois que vous tentez d'afficher le composant renvoyé. Après que React ait appelé `load` pour la première fois, il patientera pour qu'il soit résolu, et ensuite affichera la valeur résolue comme un composant React. La promesse renvoyée et la promesse résolue seront toutes deux mises en cache, et React n'appelera pas `load` plus d'une fois. Si la promesse est rejetée, React `levera` la raison du rejet pour la limite d'erreur la plus proche à gérer.
+* `load` : une fonction qui renvoie une [promesse](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou un *thenable* (un objet doté d'une méthode `then` compatible). React n'appellera pas `load` tant que vous ne tenterez pas d'afficher le composant renvoyé. Après que React a appelé `load` pour la première fois, il patientera pour que la promesse s'établisse, puis affichera la valeur accomplie comme composant React. Tant la promesse renvoyée que sa valeur d'accomplissement seront mises en cache, et React ne rappellera pas `load`. Si la promesse rejette, React lèvera (`throw`) la raison du rejet (généralement une `Error`) pour que le périmètre d'erreur le plus proche la gère.
 
-#### Renvois {/*returns*/}
+#### Valeur renvoyée {/*returns*/}
 
-`lazy` renvoi un composant React que vous pouvez faire le rendu dans votre arborescence. Pendant que le code du composant lazy est en cours de chargement, la tentative de l'afficher sera *suspendue*. Utilisez [`<Suspense>`](/reference/react/Suspense) pour afficher un indicateur de chargement pendant le chargement.
+`lazy` renvoie un composant React que vous pouvez afficher dans votre arborescence. Pendant que le code du composant chargé à la demande se charge, toute tentative de l'afficher *suspend*. Utilisez [`<Suspense>`](/reference/react/Suspense) pour afficher un indicateur de chargement pendant ce temps-là.
 
 ---
 
 ### La fonction `load` {/*load*/}
 
 #### Paramètres {/*load-parameters*/}
 
-`load` ne reçoit pas de paramètres.
+`load` ne prend aucun paramètre.
 
-#### Renvois {/*load-returns*/}
+#### Valeur renvoyée {/*load-returns*/}
 
-Vous aurez besoin de renvoyer une [Promesse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou d'autres *thenable* (un objet de promesse résolue avec la méthode `then`). il doit finalement se comporter comme un composant React valide, tel une qu'une fonction, [`memo`](/reference/react/memo), ou un composant [`forwardRef`](/reference/react/forwardRef).
+Vous aurez besoin de renvoyer une [promesse](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou un *thenable* (un objet doté d'une méthode `then` compatible). La valeur accomplie doit finalement se comporter comme un composant React valide, tel une qu'une fonction, un composant [`memo`](/reference/react/memo), ou un composant [`forwardRef`](/reference/react/forwardRef).
 
 ---
 
-## Mode d’utilisation {/*usage*/}
+## Utilisation {/*usage*/}
 
-### Composants Lazy-loading avec Suspense {/*suspense-for-code-splitting*/}
+### Charger des composants à la demande avec Suspense {/*suspense-for-code-splitting*/}
 
-En général, vous importez vos composants avec la déclaration statique [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) :
+En général, vous importez vos composants avec la déclaration statique [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) :
 
 ```js
 import MarkdownPreview from './MarkdownPreview.js';
@@ -70,9 +70,9 @@ import { lazy } from 'react';
 const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 ```
 
-Ce code s'appuie sur [l'importation dynamique `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) ce qui peut nécessiter l'aide de votre bundler ou framework.
+Ce code s'appuie sur [l'importation dynamique `import()`,](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import), ce qui peut nécessiter une prise en charge de votre *bundler* ou framework.
 
-Maintenant que le code de votre composant se charge à la demande, vous aurez besoin de spécifier ce qui devra afficher pendant son chargement. Vous pouvez faire cela en enrobant le composant lazy ou l'un de ses parents dans une limitte [`<Suspense>`](/reference/react/Suspense) :
+Maintenant que le code de votre composant se charge à la demande, vous aurez besoin de spécifier ce qui devrait être affiché pendant son chargement. Vous pouvez le faire en enrobant le composant chargé à la demande ou l'un de ses parents dans un périmètre [`<Suspense>`](/reference/react/Suspense) :
 
 ```js {1,4}
 <Suspense fallback={<Loading />}>
@@ -81,7 +81,7 @@ Maintenant que le code de votre composant se charge à la demande, vous aurez be
  </Suspense>
 ```
 
-Dans cet exemple, le code de `MarkdownPreview` ne sera pas chargé jusqu'à ce que vous essayez de l'afficher. Si `MarkdownPreview` n'est pas encore chargé, `Loading` sera affiché à sa place. Essayez de cocher la case :
+Dans cet exemple, le code de `MarkdownPreview` ne sera pas chargé jusqu'à ce que vous essayiez de l'afficher. Si `MarkdownPreview` n'est pas encore chargé, `Loading` sera affiché à sa place. Essayez de cocher la case :
 
 <Sandpack>
 
@@ -93,13 +93,13 @@ const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')))
 
 export default function MarkdownEditor() {
   const [showPreview, setShowPreview] = useState(false);
-  const [markdown, setMarkdown] = useState('Bonjour, **monde**!');
+  const [markdown, setMarkdown] = useState('Salut **tout le monde** !');
   return (
     <>
       <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
       <label>
         <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
-        Afficher l'aperçu
+        Afficher l’aperçu
       </label>
       <hr />
       {showPreview && (
@@ -112,7 +112,7 @@ export default function MarkdownEditor() {
   );
 }
 
-// Ajouter un délai fixe pour voir l'état de chargement
+// Ajouter un délai fixe pour voir l’état de chargement
 function delayForDemo(promise) {
   return new Promise(resolve => {
     setTimeout(resolve, 2000);
@@ -175,34 +175,34 @@ body {
 
 </Sandpack>
 
-Cette démo se charge avec un retard artificiel. La prochaine fois que vous décochez et cochez la case, `Preview` sera mis en cache, il n'y aura donc pas d'état de chargement. Pour voir à nouveau l'état de chargement, Cliquez sur  "Réinitialiser" dans le bac à sable.
+Cette démo se charge avec un retard artificiel. La prochaine fois que vous décochez et cochez la case, `Preview` sera mis en cache, il n'y aura donc pas d'état de chargement. Pour voir à nouveau l'état de chargement, cliquez sur  "Réinitialiser" dans le bac à sable.
 
 [En savoir plus sur la gestion des états de chargement avec Suspense](/reference/react/Suspense).
 
 ---
 
-## Résolution des problèmes {/*troubleshooting*/}
+## Dépannage {/*troubleshooting*/}
 
-### L'état de mon composant `lazy` se réinitialise de façon inattendue {/*my-lazy-components-state-gets-reset-unexpectedly*/}
+### L'état de mon composant `lazy` est réinitialisé de façon inattendue {/*my-lazy-components-state-gets-reset-unexpectedly*/}
 
-Ne déclarez pas les composants `lazy` *à l'interieur* d'autres composants
+Ne déclarez pas les composants `lazy` *à l'intérieur* d'autres composants :
 
 ```js {4-5}
 import { lazy } from 'react';
 
 function Editor() {
-  // 🔴 Mauvais: Cela entraînera la réinitialisation de tous les états lors des réaffichages
+  // 🔴 Erroné : ça entraînera la réinitialisation de tous les états lors des réaffichages
   const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
   // ...
 }
 ```
 
-Au lieu de cela, déclarez-les toujours au début de votre module :
+Déclarez-les toujours plutôt au début de votre module :
 
 ```js {3-4}
 import { lazy } from 'react';
 
-// ✅ Parfait: Déclarez les composants lazy en déhors de vos composants
+// ✅ Correct : déclarez les composants lazy en-dehors de vos composants
 const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 
 function Editor() {