Componentes puros
El mismo input, siempre el mismo output
Un componente puro es aquel que dado las mismas props produce exactamente el mismo JSX — sin efectos secundarios en el render. React puede saltarse su re-render si las props no cambiaron, haciendo la UI predecible y optimizable.
React.memo
memo(Componente) envuelve el componente y memoriza el último output. En el siguiente render, si las props son iguales por referencia (shallow equality), React reutiliza el resultado anterior sin llamar a la función. Útil en hijos costosos que reciben props estables.
La trampa de las referencias
memo compara props con Object.is. Si el padre pasa un objeto literal o función inline, crea una nueva referencia en cada render — memo siempre ve props "distintas" y nunca se salta el render. Por eso se combina con useMemo y useCallback.
Tropiezos comunes
- 01memo no es gratis — tiene un costo de comparación. Solo úsalo cuando el render del hijo sea mediblemente costoso.
- 02memo solo hace shallow comparison. Si pasas objetos anidados con la misma estructura pero distinta referencia, siempre re-renderiza.
- 03Un componente puede ser puro conceptualmente aunque use hooks — lo que importa es que el render sea determinístico dadas las mismas props y estado.