La carga diferida (lazy loading) en React se usa para retrasar la inicialización de un objeto o una función hasta el momento en que se necesita por primera vez. Esta técnica puede hacer que una aplicación React sea más eficiente y optimice el tiempo de carga al dividir el código de la aplicación en varias partes y cargarlas solo cuando sea necesario.
Aquí se explica cómo utilizar la carga diferida en React:
1. Importa Suspense y lazy de React
Suspense permite mostrar algún contenido de respaldo mientras se espera el cargado del componente y lazy es lo que permite cargar los componentos de forma diferida.
```javascript
import React, { Suspense, lazy } from ‘react’;
```
2. Usa lazy para importar el componente
Usa la función `lazy` para importar tu componente. Esto hará que el componente solo se cargue cuando se invoque.
```javascript
const LazyComponent = lazy(() => import(‘./component’));
```
La función `import()` importará el componente de manera asíncrona.
3. Usa Suspense para envolver tu componente
`Suspense` permite mostrar un contenido de respaldo (como un indicador de carga) mientras se carga tu componente.
```javascript
Al utilizar este método, tu componente `LazyComponent` solo se cargará cuando se necesite mostrar en la interfaz de usuario, y mientras tanto, se mostrará el contenidos de respaldo definido en fallback.
Nota: Suspense y lazy no son útiles para hacer la carga diferida en el lado del servidor, sólo funcionan en el lado del cliente.
Si estás utilizando versiones anteriores a React 16.6, entonces tendrás que utilizar la biblioteca react-loadable para la carga diferida hasta que puedas actualizar a una versión posterior de React.
