Formation Apprendre React : Chargement asynchrone via lazy()

lazy permet de charger un composant de manière asynchrone pour alléger le chargement initial de la page. Cela s'avèrera utile pour des composants qui ne sont pas forcément visible souvent.

import { lazy } from 'react';

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

On notera que lazy ne fonctionne que dans le cas d'export par défaut (pour le moment cela ne fonctionne pas avec des exports nommés). Le composant créé avec la méthode lazy doit être entouré d'un composant <Suspense> qui permettra d'afficher un fallback pendant le chargement de notre composant.

<Suspense fallback={<Loading />}>
  <h2>Aperçu</h2>
  <MarkdownPreview />
 </Suspense>

Pour plus d'exemples, n'hésitez pas à vous rendre sur la documentation