Nota bene

Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un’ulteriore revisione da parte della community sarebbe comunque utile. Migliora questa traduzione.

lazy ti permette di posticipare il caricamento del codice del componente fino alla sua prima renderizzazione.

const SomeComponent = lazy(load)

Reference

lazy(load)

Chiama lazy fuori dai tuoi componenti per dichiarare un componente React con lazy loading:

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

Vedi altri esempi sotto.

Parameters

  • load: Una funzione che restituisce una Promise o un altro thenable (un oggetto simile a una Promise con un metodo then). React non chiamerà load fino al primo tentativo di renderizzare il componente restituito. Dopo la prima chiamata a load, React attenderà che venga risolta e poi renderizzerà la proprietà .default del valore risolto come componente React. Sia la Promise restituita sia il valore risolto della Promise verranno memorizzati in cache, quindi React non chiamerà load più di una volta. Se la Promise viene rifiutata, React throwerà il motivo del rifiuto affinché lo gestisca il contenitore di errori più vicino.

Returns

lazy restituisce un componente React che puoi renderizzare nel tuo albero. Mentre il codice del componente lazy è ancora in caricamento, il tentativo di renderizzarlo lo farà andare in sospensione. Usa <Suspense> per mostrare un indicatore di caricamento mentre è in caricamento.

Funzione load

Parameters

load non riceve parametri.

Returns

Devi restituire una Promise o un altro thenable (un oggetto simile a una Promise con un metodo then). Deve risolversi infine in un oggetto la cui proprietà .default è un tipo componente React valido, come una funzione, un componente memo o un componente forwardRef.

Usage

Lazy-loading dei componenti con Suspense

Di solito, importi i componenti con la dichiarazione statica import:

import MarkdownPreview from './MarkdownPreview.js';

Per posticipare il caricamento del codice di questo componente fino alla sua prima renderizzazione, sostituisci questa importazione con:

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

Questo codice si basa su import() dinamico, che potrebbe richiedere il supporto del tuo bundler o framework. Usare questo pattern richiede che il componente lazy che importi sia l’export default del modulo.

Ora che il codice del tuo componente si carica on demand, devi anche specificare cosa mostrare mentre è in caricamento. Puoi farlo avvolgendo il componente lazy o uno dei suoi genitori in un boundary <Suspense>:

<Suspense fallback={<Loading />}>
  <h2>Anteprima</h2>
  <MarkdownPreview />
</Suspense>

In questo esempio, il codice di MarkdownPreview non verrà caricato finché non tenti di renderizzarlo. Se MarkdownPreview non si è ancora caricato, al suo posto verrà mostrato Loading. Prova a selezionare la checkbox:

import { useState, Suspense, lazy } from 'react';
import Loading from './Loading.js';

const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));

export default function MarkdownEditor() {
  const [showPreview, setShowPreview] = useState(false);
  const [markdown, setMarkdown] = useState('Hello, **world**!');
  return (
    <>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <label>
        <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
        Mostra anteprima
      </label>
      <hr />
      {showPreview && (
        <Suspense fallback={<Loading />}>
          <h2>Anteprima</h2>
          <MarkdownPreview markdown={markdown} />
        </Suspense>
      )}
    </>
  );
}

// Aggiungi un ritardo fisso per poter vedere l'indicatore di caricamento
function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
}

Questa demo usa un ritardo artificiale. La prossima volta che deselezioni e selezioni di nuovo la checkbox, Anteprima sarà in cache, quindi non ci sarà alcun indicatore di caricamento. Per vedere di nuovo l’indicatore di caricamento, fai clic su “Reset” nella sandbox.

Scopri di più sulla gestione degli stati di caricamento con Suspense.

Troubleshooting

Lo state del mio componente lazy viene resettato in modo imprevisto

Non dichiarare componenti lazy all’interno di altri componenti:

import { lazy } from 'react';

function Editor() {
  // 🔴 Sbagliato: questo farà resettare tutto lo state alle ri-renderizzazioni
  const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
  // ...
}

Dichiarali invece sempre al top level del tuo modulo:

import { lazy } from 'react';

// ✅ Corretto: dichiara i componenti lazy fuori dai tuoi componenti
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

function Editor() {
  // ...
}
PreviouscreateContext
Nextmemo