¿Qué hace React.memo y cuándo vale la pena usarlo?

Question

Accepted Answer

`React.memo` envuelve un componente para que **omita volver a renderizarse cuando sus props son superficialmente iguales** a las del render anterior. Por defecto, un hijo se vuelve a renderizar cada vez que lo hace su padre; `memo` corta ese cortocircuito cuando las props en realidad no cambiaron. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

onSelect(item.id)}>{item.name}

; }); ``` ## El truco: necesita props estables `memo` hace una comparación **superficial**. Si el padre pasa un nuevo objeto, arreglo o función en cada render, la comparación siempre falla y `memo` no sirve de nada: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Solución: estabiliza la función con `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Cuándo vale la pena - Un componente se renderiza **con frecuencia** con las **mismas** props y su renderizado no es trivial (listas grandes, subárboles costosos). ## Cuándo no - La mayoría de los componentes son baratos; la comparación en sí tiene un costo, y envolver todo agrega complejidad sin ninguna ganancia. **Perfila primero** con el Profiler de React DevTools, y luego memoriza los puntos críticos comprobados; no memorices a ciegas.