React es rápido por defecto, pero es muy fácil hacerlo lento. Una app lenta frustra a los usuarios y penaliza el SEO (Core Web Vitals). La optimización en React es un arte que requiere entender cómo funciona el motor de reconciliación bajo el capó.

Evitando Renders Innecesarios

El pecado capital. Usa React DevTools Profiler y activa la opción "Highlight updates when components render". Si escribes en un input y toda la página parpadea, tienes un problema. Usa React.memo, useMemo y useCallback para estabilizar referencias y evitar que componentes hijos se rendericen si sus props no han cambiado.

Virtualización de Listas

Renderizar 5000 elementos en el DOM matará al navegador. Usa librerías como react-window o react-virtuoso. Solo renderizan los elementos visibles en el viewport. La diferencia de rendimiento es de pasar de 10fps a 60fps instantáneamente.

Carga Diferida (Lazy Loading)

No cargues componentes que el usuario no ve. Usa React.lazy y Suspense para cargar modales, pestañas ocultas o rutas secundarias solo cuando se necesitan. Esto reduce drásticamente el JavaScript inicial (TBT) y acelera la carga.

Estado Global

Cuidado con Context API para estados que cambian muy rápido. Provoca re-renders en todo el árbol. Para estados complejos y frecuentes, prefiere gestores de estado atómicos como Zustand, Jotai o Signals, que permiten actualizaciones granulares.

Conclusión

No optimices prematuramente, pero tampoco ignores el rendimiento. Mide primero, optimiza después. Una app rápida se siente profesional y confiable. Haz del rendimiento una feature, no un afterthought.