diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index ba82d4fe2..d804f047c 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -4,7 +4,7 @@ title: lazy -`lazy` lets you defer loading component's code until it is rendered for the first time. +`lazy` vous permet de différer le chargement du code d'un composant jusqu'à son premier affichage effectif. ```js const SomeComponent = lazy(load) @@ -16,11 +16,11 @@ const SomeComponent = lazy(load) --- -## Reference {/*reference*/} +## Référence {/*reference*/} ### `lazy(load)` {/*lazy*/} -Call `lazy` outside your components to declare a lazy-loaded React component: +Appelez `lazy` en-dehors de vos composants pour déclarer un composant React chargé à la demande : ```js import { lazy } from 'react'; @@ -28,41 +28,41 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -[See more examples below.](#usage) +[Voir d'autres exemples ci-dessous](#usage). -#### Parameters {/*parameters*/} +#### Paramètres {/*parameters*/} -* `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or another *thenable* (a Promise-like object with a `then` method). React will not call `load` until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call `load` more than once. If the Promise rejects, React will `throw` the rejection reason for the nearest Error Boundary to handle. +* `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 accomplie 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. -#### Returns {/*returns*/} +#### Valeur renvoyée {/*returns*/} -`lazy` returns a React component you can render in your tree. While the code for the lazy component is still loading, attempting to render it will *suspend.* Use [``](/reference/react/Suspense) to display a loading indicator while it's loading. +`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 [``](/reference/react/Suspense) pour afficher un indicateur de chargement pendant ce temps-là. --- -### `load` function {/*load*/} +### La fonction `load` {/*load*/} -#### Parameters {/*load-parameters*/} +#### Paramètres {/*load-parameters*/} -`load` receives no parameters. +`load` ne prend aucun paramètre. -#### Returns {/*load-returns*/} +#### Valeur renvoyée {/*load-returns*/} -You need to return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). It needs to eventually resolve to a valid React component type, such as a function, [`memo`](/reference/react/memo), or a [`forwardRef`](/reference/react/forwardRef) component. +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). --- -## Usage {/*usage*/} +## Utilisation {/*usage*/} -### Lazy-loading components with Suspense {/*suspense-for-code-splitting*/} +### Charger des composants à la demande avec Suspense {/*suspense-for-code-splitting*/} -Usually, you import components with the static [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) declaration: +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'; ``` -To defer loading this component's code until it's rendered for the first time, replace this import with: +Pour différer le chargement du code de ce composant jusqu'à ce qu'il affiche pour la première fois, remplacez cette importation avec : ```js import { lazy } from 'react'; @@ -70,18 +70,18 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -This code relies on [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) which might require support from your bundler or 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. -Now that your component's code loads on demand, you also need to specify what should be displayed while it is loading. You can do this by wrapping the lazy component or any of its parents into a [``](/reference/react/Suspense) boundary: +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 [``](/reference/react/Suspense) : ```js {1,4} }> -

Preview

+

Aperçu

``` -In this example, the code for `MarkdownPreview` won't be loaded until you attempt to render it. If `MarkdownPreview` hasn't loaded yet, `Loading` will be shown in its place. Try ticking the checkbox: +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 : @@ -93,18 +93,18 @@ const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js'))) export default function MarkdownEditor() { const [showPreview, setShowPreview] = useState(false); - const [markdown, setMarkdown] = useState('Hello, **world**!'); + const [markdown, setMarkdown] = useState('Salut **tout le monde** !'); return ( <>