\n\nEstos documentos son antiguos y no se actualizarán. Vaya a react.dev para ver los nuevos documentos de React.
\nEstas nuevas páginas de documentación enseñan React moderno e incluyen ejemplos en vivo:
\n\n
\n- \n
lazy- \n
<Suspense>
La mayoría de las aplicaciones React tendrán sus archivos “empaquetados” o en un bundle con herramientas como Webpack, Rollup o Browserify. El bundling es el proceso de seguir los archivos importados y fusionarlos en un archivo único: un bundle o “paquete”. Este bundle se puede incluir en una página web para cargar una aplicación completa de una sola vez.
\nApp:
\n// app.js\nimport { add } from './math.js';\n\nconsole.log(add(16, 26)); // 42// math.js\nexport function add(a, b) {\n return a + b;\n}Bundle:
\nfunction add(a, b) {\n return a + b;\n}\n\nconsole.log(add(16, 26)); // 42\n\nNota:
\nTus bundles van a lucir muy diferente a esto.
\n
Si usas Create React App, Next.js, Gatsby, o una herramienta similar, vas a tener una configuración de Webpack incluida para generar el bundle de tu aplicación.
\nSi no, tú mismo vas a tener que configurar el bundling. Por ejemplo, revisa las guías Installation y Getting Started en la documentación de Webpack.
\nEl Bundling es genial, pero a medida que tu aplicación crezca, tu bundle también crecerá. Especialmente si incluyes grandes bibliotecas de terceros. Necesitas vigilar el código que incluyes en tu bundle, de manera que no lo hagas accidentalmente tan grande que tu aplicación se tome mucho tiempo en cargar.
\nPara evitar terminar con un bundle grande, es bueno adelantarse al problema y comenzar a dividir tu bundle. División de código es una funcionalidad disponible en bundlers como Webpack, Rollup y Browserify (vía factor-bundle) que puede crear múltiples bundles a ser cargados dinámicamente durante la ejecución de tu aplicación.
\nDividir el código de tu aplicación puede ayudarte a cargar solo lo necesario en cada momento para el usuario, lo cual puede mejorar dramáticamente el rendimiento de tu aplicación. Si bien no habrás reducido la cantidad total de código en tu aplicación, habrás evitado cargar código que el usuario podría no necesitar nunca, y reducido la cantidad necesaria de código durante la carga inicial.
\nimport() La mejor manera de introducir división de código en tu aplicación es a través de la sintaxis de import() dinámico.
Antes:
\nimport { add } from './math';\n\nconsole.log(add(16, 26));Después:
\nimport(\"./math\").then(math => {\n console.log(math.add(16, 26));\n});Cuando Webpack se encuentra esta sintaxis, comienza a dividir el código de tu aplicación automáticamente. Si estás usando Create React App, esto ya viene\nconfigurado para ti y puedes comenzar a usarlo. También es compatible por defecto en Next.js.
\nSi configuras Webpack por ti mismo, probablemente vas a querer leer la guía sobre división de código de Webpack. Tu configuración de Webpack debería verse vagamente como esta.
\nCuando uses Babel, tienes que asegurarte de que Babel reconozca la sintaxis de import() dinámico pero no la transforme. Para ello vas a necesitar @babel/plugin-syntax-dynamic-import.
React.lazy La función React.lazy te deja renderizar un import dinámico como un componente regular.
Antes:
\nimport OtherComponent from './OtherComponent';Después:
\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));React.lazy recibe una función que debe ejecutar un import() dinámico. Este debe retornar una Promise que se resuelve en un módulo con un export default que contenga un componente de React.
El componente lazy debería entonces ser renderizado adentro de un componente Suspense, lo que nos permite mostrar algún contenido predeterminado (como un indicador de carga) mientras estamos esperando a que el componente lazy cargue.
import React, { Suspense } from 'react';\n\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\n\nfunction MyComponent() {\n return (\n <div>\n <Suspense fallback={<div>Loading...</div>}>\n <OtherComponent />\n </Suspense>\n </div>\n );\n}La prop fallback acepta cualquier elemento de React que quieras renderizar mientras esperas que OtherComponent cargue. Puedes poner el componente Suspense en cualquier parte sobre el componente lazy. Incluso puedes envolver múltiples componentes lazy con un solo componente Suspense.
import React, { Suspense } from 'react';\n\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\nconst AnotherComponent = React.lazy(() => import('./AnotherComponent'));\n\nfunction MyComponent() {\n return (\n <div>\n <Suspense fallback={<div>Loading...</div>}>\n <section>\n <OtherComponent />\n <AnotherComponent />\n </section>\n </Suspense>\n </div>\n );\n}Cualquier componente puede suspenderse como resultado del renderizado, incluso componentes que ya se mostraron al usuario. Para que el contenido de la pantalla siempre sea consistente, si un componente que ya se ha mostrado se suspende, React trata de esconder su árbol hacia arriba hasta la barrera <Suspense> más cercana. Sin embargo, desde la perspectiva del usuario esto puede desorientar.
Considera este componente para cambiar de pestaña:
\nimport React, { Suspense } from 'react';\nimport Tabs from './Tabs';\nimport Glimmer from './Glimmer';\n\nconst Comments = React.lazy(() => import('./Comments'));\nconst Photos = React.lazy(() => import('./Photos'));\n\nfunction MyComponent() {\n const [tab, setTab] = React.useState('photos');\n \n function handleTabSelect(tab) {\n setTab(tab);\n };\n\n return (\n <div>\n <Tabs onTabSelect={handleTabSelect} />\n <Suspense fallback={<Glimmer />}>\n {tab === 'photos' ? <Photos /> : <Comments />}\n </Suspense>\n </div>\n );\n}En este ejemplo, si la pestaña se cambia de 'photos' a 'comments', pero Comments se suspende, el usuario solo verá un destello. Esto tiene sentido porque el usuario no quiere ya ver Photos, el componente Comments aún no está listo para renderizar nada, y React necesita mantener la experiencia de usuario de forma consistente, así que no tiene otra opción que mostrar el componente Glimmer de arriba.
Sin embargo, a veces esta experiencia de usuario no es deseable. En particular, a veces es mejor mostrar la IU “vieja” mientras se prepara la nueva IU. Puedes usar la nueva API startTransition para que React haga esto:
function handleTabSelect(tab) {\n startTransition(() => {\n setTab(tab);\n });\n}Aquí, le dices a React que poner la pestaña en 'comments' no es una actualización urgente, sino que es una transición que puede tomar algún tiempo. React mantendrá entonces la IU anterior en su lugar y aún interactiva, y cambiará a mostrar <Comments /> cuando esté lista. Mira Transiciones para más información.
Si el otro módulo no se carga (por ejemplo, debido a un fallo de la red), se generará un error. Puedes manejar estos errores para mostrar una buena experiencia de usuario y manejar la recuperación con Límites de error. Una vez hayas creado tu límite de error (Error Boundary) puedes usarlo en cualquier parte sobre tus componentes lazy para mostrar un estado de error cuando haya un error de red.
\nimport React, { Suspense } from 'react';\nimport MyErrorBoundary from './MyErrorBoundary';\n\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\nconst AnotherComponent = React.lazy(() => import('./AnotherComponent'));\n\nconst MyComponent = () => (\n <div>\n <MyErrorBoundary>\n <Suspense fallback={<div>Loading...</div>}>\n <section>\n <OtherComponent />\n <AnotherComponent />\n </section>\n </Suspense>\n </MyErrorBoundary>\n </div>\n);Decidir en qué parte de tu aplicación introducir la división de código puede ser un poco complicado. Quieres asegurarte de elegir lugares que dividan los bundles de manera uniforme, sin interrumpir la experiencia del usuario.
\nUn buen lugar para comenzar es con las rutas. La mayoría de la gente en la web está acostumbrada a que las transiciones entre páginas se tomen cierto tiempo en cargar. También tiendes a volver a renderizar todo de una vez, así que es improbable que tus usuarios interactúen con otros elementos en la página al mismo tiempo.
\nEste es un ejemplo de cómo configurar la división de código basada en rutas en tu aplicación usando bibliotecas como React Router con React.lazy.
import React, { Suspense, lazy } from 'react';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\n\nconst Home = lazy(() => import('./routes/Home'));\nconst About = lazy(() => import('./routes/About'));\n\nconst App = () => (\n <Router>\n <Suspense fallback={<div>Loading...</div>}>\n <Routes>\n <Route path=\"/\" element={<Home />} />\n <Route path=\"/about\" element={<About />} />\n </Routes>\n </Suspense>\n </Router>\n);React.lazy actualmente solo admite exports tipo default. Si el módulo que desea importar utiliza exports con nombre, puede crear un módulo intermedio que lo vuelva a exportar como default. Esto garantiza que el tree shaking siga funcionando y que no importes componentes no utilizados.
// ManyComponents.js\nexport const MyComponent = /* ... */;\nexport const MyUnusedComponent = /* ... */;// MyComponent.js\nexport { MyComponent as default } from \"./ManyComponents.js\";// MyApp.js\nimport React, { lazy } from 'react';\nconst MyComponent = lazy(() => import(\"./MyComponent.js\"));