La optimización prematura es un coste
React.memo, useMemo y useCallback no son gratis: cada uno guarda
valores en memoria y compara dependencias en cada render. Si los aplicas a todo
"por si acaso", añades complejidad y a veces hasta empeoras el rendimiento.
"La optimización prematura es la raíz de todos los males." — Donald Knuth
Mide primero
La regla de oro: mide antes de optimizar. No optimices basándote en intuiciones. Herramientas para medir:
- React DevTools → pestaña Profiler: muestra qué componentes se re-renderizan y cuánto tardan.
- El resaltado de renders ("highlight updates") para ver visualmente qué se repinta.
performance.now()para cronometrar cálculos concretos.
¿Cuándo SÍ optimizar?
- El Profiler muestra un componente lento que re-renderiza con frecuencia.
- Un cálculo realmente caro (ordenar/filtrar miles de elementos) corre en cada render.
- Una lista larga se repinta entera al cambiar un solo elemento.
¿Cuándo NO?
- Componentes pequeños y baratos: memoizarlos no aporta nada.
- Antes de tener un problema medible. Si no notas lentitud, no la inventes.
- Como hábito automático en cada componente: ensucia el código sin beneficio.
Mejor que memoizar: reducir el trabajo
A menudo la mejor optimización no es memo, sino cambiar la estructura:
- Sube el estado solo lo necesario y baja los componentes que no dependen de él, para que no re-rendericen.
- Pasa contenido como
childrenpara que no se vuelva a crear. - Divide componentes grandes en piezas más pequeñas y enfocadas.
Orden correcto: 1) escribe código claro, 2) mide si hay un problema real, 3) optimiza solo lo que el Profiler señale, 4) vuelve a medir para confirmar la mejora.