Cargando componentes asíncronos de manera ineficiente puede hacer que tu aplicación React parezca lenta.

El truco

ANTES:

import React, { useState, useEffect } from 'react';
import MyComponent from './MyComponent';

function App() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchData().then(() => setIsLoading(false));
  }, []);

  return (
    <div>
      {isLoading ? <p>Loading...</p> : <MyComponent />}
    </div>
  );
}

async function fetchData() {
  // Simula una llamada a una API
  return new Promise((resolve) => setTimeout(resolve, 2000));
}

export default App;

DESPUÉS:

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

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<p>Loading...</p>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Al usar Suspense y lazy, liberas useEffect y useState de manejar el estado de carga. lazy permite cargar componentes asíncronos sólo cuando se necesitan, y Suspense gestiona la visualización temporal mientras eso ocurre. Así, simplificas el código y mejoras la experiencia del usuario con un “fallback” más limpio.

En resumen: deja que React gestione la carga asíncrona y simplifica tu flujo con Suspense y lazy.