lazy vous permet de différer le chargement du composant jusqu’à son affichage pour la première fois.

const SomeComponent = lazy(load)

Référence

lazy(load)

Appelez lazy en dehors de vos composants pour déclarer un composant React lazy-loaded:

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

Voir les exemples ci-dessous.

Paramètres

  • load: Une fonction qui renvoie une Promesse 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.

Renvois

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> pour afficher un indicateur de chargement pendant le chargement.

La fonction load

Paramètres

load ne reçoit pas de paramètres.

Renvois

Vous aurez besoin de renvoyer une Promesse 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, ou un composant forwardRef.

Mode d’utilisation

Composants Lazy-loading avec Suspense

En général, vous importez vos composants avec la déclaration statique import :

import MarkdownPreview from './MarkdownPreview.js';

Pour différer le chargement du code de ce composant jusqu’à ce qu’il affiche pour la première fois, remplacez cette importation avec :

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

Ce code s’appuie sur l’importation dynamique import(), ce qui peut nécessiter l’aide 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> :

<Suspense fallback={<Loading />}>
  <h2>Aperçu</h2>
  <MarkdownPreview />
 </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 :

import { useState, Suspense, lazy } from 'react';
import Loading from './Loading.js';

const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));

export default function MarkdownEditor() {
  const [showPreview, setShowPreview] = useState(false);
  const [markdown, setMarkdown] = useState('Bonjour, **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
      </label>
      <hr />
      {showPreview && (
        <Suspense fallback={<Loading />}>
          <h2>Aperçu</h2>
          <MarkdownPreview markdown={markdown} />
        </Suspense>
      )}
    </>
  );
}

// Ajouter un délai fixe pour voir l'état de chargement
function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
}

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.

Résolution des problèmes

L’état de mon composant lazy se réinitialise de façon inattendue

Ne déclarez pas les composants lazy à l’interieur d’autres composants

import { lazy } from 'react';

function Editor() {
  // 🔴 Mauvais: Cela 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 :

import { lazy } from 'react';

// ✅ Parfait: Déclarez les composants lazy en déhors de vos composants
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

function Editor() {
  // ...
}
PrécédentforwardRefSuivantmemo

Comment trouvez-vous ces docs ?