<aside> 💡 Nos perimite dividir nuestra aplicacion en pequeños trozos, así cuando necesitemos una parte react se encargara de llamarla

</aside>

Uso

Esta funcion recibe como parametro una funcion que devuelve un import dinámico, que será nuestro componente. Es importante que nuestro componente se pueda exportar sin ser nombrado ( import { Component } from ‘./Components’ ). Despues de asignarle el valor a una constante, como vamos a cargar algo de forma dinamica debemos de usar <Suspense> de la dependencia ‘react’, para suspender la app mientras carga nuestro componente.

<Suspense> tendra recibira una prop fallback que sera lo que se renderizara mientras carga el componente.

Ejemplo de uso

supongamos que tenemos una pagina Hello que queremos renderizar solo cuando se requiera. Podemos usar el siguiente código.

Hello.js

import React from 'react'

export default () => <h1>Hello</h1>

App.js

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { NotFound } from './pages/NotFound'
import { Home } from './pages/Home'
import { Hello } from './pages/Hello'

const Favs = React.lazy(() => import('./pages/Favs'))

export const App = () => {
	return (
		<Suspense fallback={<div>Loading...</div>}>
      <BrowserRouter>
     
        <Routes>
          <Route exact path='/' element={<Home />} />
          <Route exact path='/helloWorld' element={<Hello />} />
          <Route path='*' element={<NotFound />} />
        </Routes>

      </BrowserRouter>
    </Suspense>
	)
}

<aside> 🗒️ Nota:

React.lazy y Suspense aún no están disponibles para hacer renderización del lado del servidor. Si quieres hacer división de código en una aplicación renderizada en el servidor, recomendamos Loadable Components. Tiene una buena guía para dividir bundles con renderización del lado del servidor.

</aside>