Il caricamento lento (o lazy loading) è un pattern di progettazione che ritarda l’inizializzazione di un oggetto fino al momento in cui è necessario. Può contribuire a migliorare le prestazioni e l’efficienza di un’applicazione web, poiché riduce i tempi di caricamento iniziali.
A partire da React 16.6.0, abbiamo a disposizione React.lazy() che ci permette di caricare dinamicamente i componenti.
Ecco come usarlo:
1. Importazione di React e Suspense:
```
import React, { Suspense } from ‘react’;
```
1. Creazione di un componente caricato in modo lento:
```
const LazyComponent = React.lazy(() => import(‘./LazyComponent’));
```
Nell’esempio sopra, ‘./LazyComponent’ è il percorso al file del componente che si desidera caricare in maniera lenta.
1. Utilizzo di Suspense per visualizzare alcuni contenuti di back up mentre si sta caricando il componente lento:
```
function MyComponent() {
return (
In questo esempio, ‘Loading…’ sarà mostrato finché LazyComponent non sarà completamente caricato.
Nota Bene: React.lazy e Suspense non sono ancora disponibili per il rendering lato server. Per il rendering lato server, potrebbe essere necessario utilizzare una libreria di terze parti come ‘loadable-components’.
Inoltre, React.lazy attualmente accetta solamente default export. Se il modulo che stai importando utilizza un named export, puoi crearne un altro modulo intermedio che ri-esporta come default l’export nominato desiderato.
