Optimizando el rendimiento en aplicaciones React: lo que realmente funciona

Cuando una aplicación React empieza a crecer, el rendimiento deja de ser un "detalle técnico" y se convierte en un problema real: tiempos de carga altos, renders innecesarios, interfaces que se sienten lentas y una mala experiencia de usuario.

Algo importante que he aprendido optimizando aplicaciones React es que el rendimiento no se mejora con un solo cambio, sino entendiendo dónde está el cuello de botella y aplicando las herramientas correctas.

En este artículo voy a resumir las técnicas que más impacto real tienen en rendimiento en aplicaciones React.

1. El error más común: optimizar sin medir

Antes de usar useMemo, useCallback o cualquier otra técnica, hay que responder a una pregunta:

¿Qué parte de la aplicación es realmente lenta?

Herramientas que deberías usar siempre:

Muchas veces el problema no es React, sino:

Regla básica: primero medir → luego optimizar.

2. Re-renderizados innecesarios: el verdadero enemigo

En React, el mayor problema de rendimiento suelen ser los renders innecesarios.

Cada vez que cambia el estado, React vuelve a renderizar componentes. Si la aplicación no está bien estructurada, puedes acabar renderizando media aplicación por un cambio pequeño.

Soluciones reales: React.memo

Evita que un componente se renderice si sus props no cambian.

const UserCard = React.memo(({ user }) => {
  return <div>{user.name}</div>;
});

Muy útil en:

useMemo

Sirve para memorizar cálculos costosos.

const filteredUsers = useMemo(() => {
  return users.filter(u => u.active);
}, [users]);

Importante: no usar useMemo en todo. Solo cuando:

useCallback

Evita que funciones se creen en cada render.

const handleClick = useCallback(() => {
  doSomething();
}, []);

Esto es importante cuando pasas funciones a componentes hijos con React.memo.

3. Estado global bien diseñado = aplicación rápida

Uno de los mayores saltos de rendimiento ocurre cuando pasas de:

A usar una librería de estado global como:

Por ejemplo, con Zustand puedes hacer:

const useStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

Y luego:

const user = useStore(state => state.user);

Esto es clave porque solo se renderiza el componente que usa ese estado, no toda la aplicación. Esto puede reducir renders más de un 50% en aplicaciones grandes.

4. Lazy loading y code splitting

Si tu aplicación carga todo el código al inicio, será lenta.

React permite cargar componentes solo cuando se necesitan:

const AdminPanel = React.lazy(() => import('./AdminPanel'));

Esto reduce mucho el tiempo de carga inicial. Especialmente útil para:

5. Optimización de listas grandes

Si tienes listas grandes (1000+ elementos), necesitas virtualización.

Librerías:

Esto renderiza solo los elementos visibles.

Ejemplo:

import { FixedSizeList as List } from 'react-window';

Esto puede pasar una lista de 2000 elementos de lenta → instantánea.

6. Caché de datos (muy importante)

Muchas aplicaciones hacen la misma petición una y otra vez.

Solución:

Ejemplo con React Query:

const { data } = useQuery("users", fetchUsers);

Esto cachea datos, evita peticiones repetidas y mejora mucho la sensación de velocidad.

7. Optimización de imágenes

Uno de los mayores problemas de rendimiento en frontend son las imágenes.

Soluciones:

Una imagen mal optimizada puede hacer más lenta tu app que todo el JavaScript.

8. Resumen: orden correcto para optimizar React

Si quieres optimizar una app React, este es el orden correcto:

El rendimiento no se mejora con un truco, sino con arquitectura.

Conclusión

Optimizar React no es llenar el código de useMemo. Es entender cómo renderiza React, dónde está el cuello de botella y diseñar la aplicación para que renderice solo lo necesario.

La mayor mejora de rendimiento casi siempre viene de:

No de micro-optimizaciones.