React e code splitting – parte 1

Con l’ultima versione di React sono state distribuite nuove Api che consentono di gestire scenari di code-splitting. Ma di cosa si tratta? La creazione di applicazioni web che includono javascript monolite (ad esempio bundle che racchiudono l’intera applicazione), può generare problemi di usabilità e lentezza nel caricamento. Inoltre il code splitting consente al programmatore di avere maggiore controllo sui singoli componenti. Sebbene questa tecnica non sia del tutto nuova, e sia già stato possibile utilizzarla all’interno di React, nell’ultima versione è stata introdotta la posibilità di utilizzare il nuovo API lazy() e la Suspense dei componenti.

Api Lazy()

L’utilizzo dell’ API lazy() è basato su due parti:

• l’inserimento dei componenti all’interno di files separati in modo da poterli scaricare separatamente rispetto al codice dell’applicazione
• una volta creato il bundle dei componenenti, in React è possibile utilizzare i componenti in modalità lazy, ovvero non verranno scaricati fino a quando non verranno renderizzati nella UI la prima volta.

Tipicamente quello che avvine utilizzando import all’interno dell’applicazione, verrà scaricato tutto il codice all’interno del bundle. Questo può essere un buon approccio per applicazioni non particolarmente grandi, ma comporta sicuramente lo scaricamento di funzionalità che potrebbero non essere necessarie (o almeno non sempre).

Supponiamo di volere creare un componente e di volerlo distribuire separatamente dall’applicazione:

export default function MyComponent() {
   return <p>Hello World!</p>;
}

Si tratta di un semplice componente, chiamato MyComponent, e che viene esportato. Il codice seguente permette di caricare dinamicamente il componente:

function App() {

  const [MyComponent, setMyComponent] = React.useState(() => () => null);

  React.useEffect(() => {
         import("./MyComponent").then((module) => {
         setMyComponent(() => module.default);
  });
}, []);

  return <MyComponent />;
}

Il codice precedente renderizza il contenuto di MyComponent, ma si notano subito due differenze rispetto al codice “tradizionale”:

• l’associazione del componente tramite useState(): questo perchè quando l’applicazione viene rendirezzata la prima volta, MyComponent non è ancora stato caricato. Solo quando MyComponent è stato caricato verrà renderizzato e verrà impostato MyComponent tramite userState()
• la import viene eseguita all’interno della useEffect e ritorna una promise che restituisce il componente. Inoltre, viene richiamata la useState con il metodo di default, utilizzando module.default

Eseguendo l’applicazione il render del componente ci apparirà come in un applicazione normale: solo anlizzando le chiamate che vengono effettuate tramite i dev tools (network requests) si potrà notare che il caricamento di MyComponent avviene in una chiamata separata.

Questo tipo di approccio non è l’unico che può essere utilizzato, e nel prossimo post analizzeremo come l’API lazi() consente di semplificare il processo.