Renderizar componentes React sin control puede ser el enemigo oculto del rendimiento en tu aplicación.

El truco

Antes (mal):

const MyComponent = ({ data }) => {
  // Sin memoización, cada render recrea este filtro
  const filteredData = data.filter(item => item.active);
  
  return (
    <ul>
      {filteredData.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

Después (bien):

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

// Memoización con useMemo
const MyComponent = ({ data }) => {
  const filteredData = useMemo(() => {
    return data.filter(item => item.active);
  }, [data]);
  
  return (
    <Suspense fallback={<div>Cargando...</div>}>
      <ul>
        {filteredData.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </Suspense>
  );
};

La función useMemo evita recalcular filteredData a menos que data cambie, reduciendo los renders innecesarios. Suspense se encarga de manejar las cargas asíncronas, presentando un fallback mientras el componente o datos llegan. Esto optimiza no solo el rendimiento sino también la experiencia de usuario, entregando un componente más eficiente y reactivo.

Menos cálculo y una carga más fluida son la clave para un React que vuele.