Nell‘articolo precedente è stato importato un componente in maniera dinamica, inserendolo all’interno di una useEffect(). Nell’articolo viene caricato il component e successivamente assegnato tramite la useState().
Questo tipo di approccio è sicuramente funzionante, ma diventa difficile da gestire all’interno di progetti reali. Per poter meglio gestire il comportamento dinamico, dall’ultima versione di React è stata inserita l’API lazy().
Questa API utilizza una funzione che ritorna una promise di import(): in pratica il valore ritornato è il componente lazy da renderizzare.
In pratica, lazy consente in maniera semplice di caricare in modo dinamico un componente.
Il caricamento Non dinamico viene effettuato tramite:
import MyFeature from './MyFeature';
meditante lazy() il caricamento diventa:
const MyFeature = React.lazy(() => import("./MyFeature"));Quello che viene restituito è quindi una promise che si conclude con il render del’export di default del componente .
Un’altro elemento importante da ulizzare con lazy() è Suspense che consente di visualizzare un placeholder durante il caricamento di un componente lazy. Suspense verrà descritto in un prossimo post.