Vai al contenuto

React.lazy, importare dinamicamente i componenti con e senza default export

Scritto da:

Stefano Pascazi

A partire dalla release v16.6 di React è possibile splittare il codice in diversi file che verranno caricati dinamicamente a seconda della navigazione, rendendo la nostra applicazione più leggera.

Lo scenario più comune di utilizzo è quando il nostro modulo o componente è esportato come default, quindi la conversione è la seguente

// Caricamento standard di un componente
import Component from './component'

const Home = () => {
    return <div>
            <Component />
        </div>
}
// con React.lazy rendiamo dinamico il caricamento
const Component = React.lazy(() => import("./component"));

const Home = () => {
    return <div>
            <Component />
        </div>
}

Ora, che succede se il nostro modulo non è esportato come default?

Secondo la regolare sintassi, il modulo o componente, lo potremmo importare in questo modo:

//component.jsx
export const Component = <h1>Sono il tuo componente</h1>

// home.jsx
import {Component} from './component'

const Home = () => {
    return <div>
            <Component />
        </div>
}

React.lazy, sfrutta il dynamic import che ritorna una Promise che deve restituire sempre un modulo esportato come default.

Allora a noi ci basta semplicemente risolvere tale Promise e riassegnare il nuovo valore come default.

//component.jsx
export const Component = <h1>Sono il tuo componente</h1>

// home.jsx
const Component = React.lazy(() => import("./component").then( module => ({default: module.Component})));

const Home = () => {
    return <div>
            <Component />
        </div>
}

Piccola nota a margine.

Ricordati sempre che i moduli che sono importati dinamicamente, devono utilizzare React.Suspense per essere correttamente importati:

const Home = () => {
    return <div>
            <React.Suspense fallback={<>Sto caricando...</>}>
                <Component />
            </React.Suspense>
        </div>
}

Articolo precedente

Come fare la build di un'immagine Docker di un'applicazione NextJs

Articolo successivo

Come creare una coppia di chiavi RSA con openSSL

Unisciti alla discussione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.