lazy
te permite diferir la carga del código del componente hasta que se renderice por primera vez.
const SomeComponent = lazy(load)
Referencia
lazy(load)
Llama a lazy
fuera de tus componentes para declarar un componente de carga diferida:
import { lazy } from 'react';
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
Parámetros
load
: Una función que devuelve una Promise u otro thenable (un objeto tipo Promise con un métodothen
). React no llamará aload
hasta la primera vez que intentes renderizar el componente devuelto. Después de que React llame por primera vez aload
, esperará a que se resuelva, y entonces renderizará el valor resuelto.default
como un componente React. Tanto la Promise devuelta como el valor resuelto de la Promise se almacenarán en caché, por lo que React no llamará aload
más de una vez. Si la Promise es rechazada, React lanzará el motivo de rechazo a la barrera de error más cercana.
Devuelve
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.
Devuelve
Necesitas devolver una Promise o algún otro thenable (un objeto tipo Promise con un método then
). Es necesario que eventualmente resuelva a un objeto cuya propiedad .default
sea un tipo de componente React válido, como una función, memo
, o un componente forwardRef
.
Uso
Componentes de carga diferida 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 soporte de tu empaquetador o framework. Usar este patrón requiere que el componente lazy que estás importando haya sido exportado como export default
.
Ahora que el código de tu componente se carga bajo demanda, también debes especificar qué debe mostrarse mientras se carga. Puedes hacer esto envolviendo el componente lazy o cualquiera de sus padres en una barrera de <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('¡Hola, **mundo**!'); 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> )} </> ); } // Agrega un retardo fijo para que puedas ver el estado de carga 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 «Reiniciar» en el sandbox.
Obtén más información sobre cómo administrar los estados de carga con Suspense.
Solución de problemas
Mi estado del componente lazy
se reinicia inesperadamente
No declarares componentes lazy
dentro de otros componentes:
import { lazy } from 'react';
function Editor() {
// 🔴 Mal: Esto causará que todo el estado se reinicie en los re-renderizados.
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
// ...
}
En cambio, decláralos siempre en el nivel superior de tu módulo:
import { lazy } from 'react';
// ✅ Bien: Declarar componentes lazy fuera de tus componentes
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
function Editor() {
// ...
}