API Reference
React APIs

lazy

lazy te permite diferir el código del componente de carga hasta que se renderice por primera vez.

const SomeComponent = lazy(load)

Uso

Componentes Lazy-loading con Suspense

Por lo general, importas componentes con la declaración estática import:

import MarkdownPreview from './MarkdownPreview.js';

Para diferir la carga del código de este componente hasta que se renderice por primera vez, reemplaza esta importación con:

import { lazy } from 'react';

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

Este código se basa en import() dinámico, que puede requerir el apoyo del paquete o del framework.

Ahora que el código de tu componente se carga a demanda, también debes especificar qué debe mostrarse mientras se carga. Puedes hacer esto envolviendo el componente lazy o cualquiera de sus padres en un <Suspense>:

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

En este ejemplo, el código para MarkdownPreview no se cargará hasta que intentes renderizarlo. Si MarkdownPreview aún no se ha cargado, Loading se mostrará en su lugar. Intenta marcar el 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)} />
        Show preview
      </label>
      <hr />
      {showPreview && (
        <Suspense fallback={<Loading />}>
          <h2>Preview</h2>
          <MarkdownPreview markdown={markdown} />
        </Suspense>
      )}
    </>
  );
}

// Add a fixed delay so you can see the loading state
function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
}

Esta demostración se carga con un retraso artificial. La próxima vez que desmarques y marques el checkbox, Preview se almacenará en caché, por lo que no se mostrará ningún estado de carga. Para ver nuevamente el estado de carga, haz clic en “ Restablecer ” en el sandbox.

Obtenga más información sobre cómo administrar los estados de carga con Suspense.

Referencia

lazy(load)

Llama a lazy fuera de tus componentes para declarar un componente lazy-loaded:

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

Parámetros

  • load: Una función que devuelve una Promesa o algún otro thenable (un objeto tipo Promise con un método then). React no llamará a load hasta la primera vez que intentes renderizar el componente devuelto. Después de que React llame por primera vez a load, esperará a que se resuelva, y entonces renderizará el valor resuelto como un componente React. Tanto la Promesa devuelta como el valor resuelto de la Promesa serán almacenados en caché, por lo que React no llamará a load más de una vez. Si la Promesa se rechaza, React lanza la razón de rechazo para dejar que el Error Boundary más cercano lo maneje.

Returns

lazy devuelve un componente React que puedes renderizar en tu árbol. Mientras el código del componente lazy sigue cargando, el intento de renderizarlo se suspenderá. Usa <Suspense> para mostrar un indicador de carga mientras se carga.

Función load

Parámetros

load no recibe parámetros.

Returns

Necesitas devolver una Promesa o algún otro thenable (un objeto tipo Promise con un método then). Eventualmente debes resolver un tipo de componente React válido, como una función, memo, o un componente forwardRef.

Solución de problemas

Mi estado del componente lazy se restablece inesperadamente

No declarar componentes lazy dentro de otros componentes:

import { lazy } from 'react';

function Editor() {
  // 🔴 Bad: This will cause all state to be reset on re-renders
  const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
  // ...
}

En cambio, declaralos siempre en el nivel superior de tu módulo:

import { lazy } from 'react';

// ✅ Good: Declare lazy components outside of your components
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

function Editor() {
  // ...
}
PreviousisValidElementNextmemo

How do you like these docs?