`React.lazy` : Chargement paresseux des composants

Le mécanisme clé du code splitting dans react

Au coeur de la stratégie de code splitting recommandée par React se trouve la fonction React.lazy. Elle fournit un moyen intégré et simple de charger des composants React de manière "paresseuse" (lazy loading), c'est-à-dire uniquement lorsque le composant est sur le point d'être rendu pour la première fois.

Comment cela fonctionne-t-il techniquement ? React.lazy prend en argument une fonction qui doit obligatoirement appeler une importation dynamique (import()). L'importation dynamique est une syntaxe JavaScript moderne (ES) qui permet de charger un module JavaScript de manière asynchrone. Elle retourne une Promesse qui se résout avec le module chargé.

React.lazy s'attend à ce que cette promesse se résolve avec un module qui a un export par défaut (`export default`) contenant le composant React que vous souhaitez charger paresseusement.

Syntaxe et utilisation de `React.lazy`

La syntaxe est directe. Au lieu d'un import statique en haut de votre fichier :

// Import statique classique
import MonComposantLourd from './MonComposantLourd';

Vous utilisez React.lazy avec une fonction fléchée contenant l'importation dynamique :

import React, { lazy } from 'react';

// Importation dynamique avec React.lazy
const MonComposantLourd = lazy(() => import('./MonComposantLourd'));

// Important : Le fichier './MonComposantLourd.js' doit exporter le composant par défaut
// export default function MonComposantLourd() { /* ... */ }

Une fois que vous avez défini `MonComposantLourd` de cette manière, vous pouvez l'utiliser dans votre JSX comme n'importe quel autre composant :

function MonApp() {
  const [afficher, setAfficher] = useState(false);

  return (
    

       setAfficher(true)}>Afficher le composant lourd
      
      {/* Condition pour rendre le composant */} 
      {afficher && (
        {/* Nécessite un Suspense quelque part au-dessus dans l'arbre */}
        
      )}
    
  );
}

Ce qui se passe :

1. Initialement, le code de `MonComposantLourd` n'est pas inclus dans le bundle principal.
2. Lorsque la condition `afficher` devient vraie, React tente de rendre ``.
3. React détecte qu'il s'agit d'un composant chargé avec `React.lazy` et dont le code n'est pas encore disponible.
4. React "suspend" le rendu de ce composant (et de ses enfants) et cherche le composant `React.Suspense` le plus proche dans l'arbre parent (voir section suivante).
5. Pendant ce temps, l'importation dynamique `import('./MonComposantLourd')` est déclenchée par le navigateur pour télécharger le "chunk" de code correspondant.
6. Une fois le code téléchargé et évalué, la promesse se résout, et React peut alors reprendre le rendu de `MonComposantLourd`.

Contraintes et points importants

• Export par défaut : React.lazy ne supporte actuellement que les exports par défaut. Si le composant que vous souhaitez charger paresseusement est un export nommé (ex: `export function MonComposant`), vous devez créer un module intermédiaire qui le ré-exporte par défaut, ou adapter l'appel `import()` pour extraire l'export nommé :

// Si MonComposant est un export nommé
const MonComposantNamed = lazy(() => 
  import('./MonComposantNamed').then(module => ({ default: module.MonComposantNamed }))
);

• Doit être rendu à l'intérieur de `Suspense` : Un composant chargé avec `React.lazy` doit impérativement être rendu comme descendant (à n'importe quel niveau) d'un composant `React.Suspense`. Sans `Suspense` pour gérer l'état de chargement, l'application générera une erreur lorsque React tentera de suspendre le rendu.
• Pas pour le rendu côté serveur (SSR) : React.lazy n'est pas supporté nativement par les solutions de rendu côté serveur de React (comme `renderToString`). Des bibliothèques tierces ou des frameworks meta comme Next.js proposent des solutions alternatives pour le code splitting en SSR.
• Impact sur le bundler : C'est votre outil de build (Webpack, Vite, Parcel) qui est responsable de détecter les appels `import()` et de créer les fichiers (chunks) séparés correspondants. Assurez-vous que votre configuration de build supporte bien les imports dynamiques.

React.lazy est donc la pierre angulaire fournie par React pour implémenter le chargement paresseux de composants. En l'associant à `Suspense` pour gérer l'état de chargement, vous pouvez facilement découper votre application en morceaux plus petits, améliorant ainsi considérablement les performances de chargement initial.