React code splitting – parte 3

Dopo aver descritto nell’articolo precedente l’API lazy(), passiamo ad analizzare un altro elemento fondamentale per la visualizzazione dei componenti lazy, il componente Suspense.

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

All’interno del componente MyComponent viene renderizzato il component OtherComponent, che è stato caricato tramite l’API lazy(). Nella return il componente è inserito all’interno di un componente Suspense. Questo elemento ci permette di caricare elementi di fallback (inserendoli all’interno della relativa prop) durante le fasi di caricamento del componente lazy. Tipicamente all’interno della fallback vengono inseriti indicatori di caricamento, come ad esempio spinner.

Il componente Suspense può racchiudere al suo interno molti componenti lazy.

Esempio di utilizzo

Per prima cosa definiamo il componente che dovrà essere caricato in modalità lazy:

export default function MyFeature() {
    return <p>My Feature</p>;
}

Ipotizziamo di creare l’applicazione che caricherà il nostro componente nel seguente modo:

const MyFeature = React.lazy(() => import("./MyFeature"));
function MyPage() {
	return (
		<>
			<h1>My Page</h1>
			<MyFeature />
		</>
	);
}

In questo caso MyFeature viene caricato come lazy, ma non viene utilizzato il componente Suspense. In pratica all’interno di applicazioni medio/grandi spesso non si applica il componente Suspense ad ogni utilizzo di componenti lazy, ma si applica a livello di applicazione:

import MyPage from "./MyPage";
function App() {
	return (
		<React.Suspense fallback={"loading..."}>
			<MyPage />
		</React.Suspense>
	);
}

In questo modo tutta l’applicazione si troverà all’interno della Suspense. E’ da tenere in considerazione che sviluppando localmente non è cosi frequente vedere il fallback del componente Suspence, questo perchè la velocità di caricamento non ha delay. Per poter simulare latenza e lentezza nello scaricamento dei dati è necessario intervenire nel codice introducendo manulamente il delay. In un prossimo post analizzeremo questo tipo di comportamento simulando direttamente nel codice.