Tu app tarda una eternidad en cargar y desespera a tus usuarios.

El truco

Antes (mal):

import React from 'react';
import Header from './Header';
import Content from './Content';
import Footer from './Footer';

function App() {
  return (
    <>
      <Header />
      <Content />
      <Footer />
    </>
  );
}

export default App;

Después (bien):

import React, { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const Content = lazy(() => import('./Content'));
const Footer = lazy(() => import('./Footer'));

function App() {
  return (
    <Suspense fallback={<div>Cargando...</div>}>
      <Header />
      <Content />
      <Footer />
    </Suspense>
  );
}

export default App;

Con lazy loading de React, cargas los componentes de manera asíncrona, mejorando el tiempo de carga inicial porque solo se renderizan cuando se necesitan. Suspense gestiona el estado de carga, proporcionando una experiencia de usuario más fluida con un fallback mientras los componentes se cargan.

No subestimes el poder del lazy loading; puede transformar la velocidad de tu app y la experiencia de usuario.