React.lazy et Suspense

Qu'est-ce que React.lazy ?

React.lazy est une fonction qui permet de charger dynamiquement des composants. Cela signifie que le composant n'est chargé que lorsqu'il est rendu pour la première fois, ce qui réduit la taille du bundle initial de votre application.

Utilisation de React.lazy

Voici un exemple simple d'utilisation de React.lazy pour charger un composant de manière paresseuse :

📋 Copier le code

import React, { Suspense } from 'react';

// Chargement paresseux du composant LazyComponent
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
return (
<div>
<Suspense fallback={<div>Chargement...</div>}>
	<LazyComponent />
</Suspense>
</div>
);
}

export default App;

Explication du code :

• React.lazy : Charge le composant LazyComponent de manière asynchrone.
• Suspense : Affiche un composant de secours (fallback) pendant que le composant est en cours de chargement.
• fallback : Le contenu à afficher pendant le chargement (ici, un simple message "Chargement...").

Utilisation de Suspense pour plusieurs composants

Vous pouvez également utiliser Suspense pour envelopper plusieurs composants paresseux. Voici un exemple :

📋 Copier le code

import React, { Suspense } from 'react';

const LazyComponent1 = React.lazy(() => import('./LazyComponent1'));
const LazyComponent2 = React.lazy(() => import('./LazyComponent2'));

function App() {
return (
<div>
<Suspense fallback={<div>Chargement...</div>}>
	<LazyComponent1 />
	<LazyComponent2 />
</Suspense>
</div>
);
}

export default App;

Explication du code :

• LazyComponent1 et LazyComponent2 : Deux composants chargés de manière paresseuse.
• Suspense : Enveloppe les deux composants et affiche un indicateur de chargement pendant que les composants sont chargés.

Gestion des erreurs avec Error Boundaries

Lorsque vous utilisez React.lazy, il est recommandé d'utiliser des Error Boundaries pour capturer les erreurs qui peuvent survenir pendant le chargement des composants. Voici un exemple :

📋 Copier le code

import React, { Suspense } from 'react';

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError(error) {
return { hasError: true };
}

componentDidCatch(error, errorInfo) {
console.error('Erreur capturée :', error, errorInfo);
}

render() {
if (this.state.hasError) {
return <div>Une erreur s'est produite.</div>;
}
return this.props.children;
}
}

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
return (
<ErrorBoundary>
<Suspense fallback={<div>Chargement...</div>}>
	<LazyComponent />
</Suspense>
</ErrorBoundary>
);
}

export default App;

Explication du code :

• ErrorBoundary : Un composant qui capture les erreurs dans ses enfants.
• getDerivedStateFromError : Met à jour l'état en cas d'erreur.
• componentDidCatch : Logge l'erreur pour le débogage.
• render : Affiche un message d'erreur si une erreur est capturée.

Conclusion

Vous avez maintenant une solide compréhension de l'utilisation de React.lazy et Suspense pour charger des composants de manière paresseuse. Ces techniques vous permettront d'améliorer les performances de votre application en réduisant le temps de chargement initial et en chargeant uniquement les composants nécessaires.

Pour continuer votre apprentissage, découvrez comment utiliser TypeScript avec React dans le chapitre suivant : TypeScript avec React.