Optimización de Componentes con React.memo y React.useMemo

Clase 8 de 10 • Curso de Next.js: Optimización y Manejo de Grandes Datasets

Resumen

Comando: git checkout -b dev 11-memoization

Nery Alberto Cano Ortigoza

student•

puedo aplicar memizacion a componentes como el header, el footer u otros componentes que se que practicamente nunca deberían cambiar? Casi todos los componentes deberían estar memoizados no?

GEMILLE ADASSI VAZQUEZ ESTRADA

student•

En teoría, sí puedes memoizar componentes como el header, el footer, o cualquier otro componente que cambie poco o nada, ya que esto evitaría re-renderizados innecesarios. Sin embargo, hay algunos puntos importantes a considerar antes de memoizar "todo".

¿Debes memoizar todos los componentes?

No necesariamente. Memoizar cada componente puede llevar a una sobrecarga innecesaria y a un código menos eficiente. Cada vez que usas memoización, React guarda referencias y realiza comparaciones (aunque sean superficiales), lo cual en algunos casos puede añadir más costo que beneficio.

Cuándo tiene sentido usar React.memo

Componentes con renders costosos: Si el componente tiene renderizados complejos, como gráficos, tablas grandes, o cálculos intensivos, React.memo es ideal para evitar hacer este proceso repetidamente.
Componentes de alta frecuencia: Componentes que se actualizan con frecuencia debido a cambios de props o state en componentes padres.
Componentes que reciben las mismas props frecuentemente: Si un componente rara vez cambia sus props, como un footer o un header en la mayoría de las aplicaciones, React.memo puede evitar renderizados innecesarios. Pero también recuerda que estos componentes suelen ser poco costosos, por lo que el beneficio puede ser mínimo.

Cuándo no es recomendable memoizar

Componentes muy simples: Si el componente es ligero y se renderiza rápidamente (por ejemplo, un botón sin demasiada lógica), la memoización no aporta mucho.
Componentes en aplicaciones pequeñas: En aplicaciones con pocos componentes y sin complejidad, la memoización añade complejidad innecesaria al código.
Cuando cambia con frecuencia: Si el componente recibe props o estado que cambian muy a menudo, la memoización podría no ser efectiva y podría incluso ralentizar el rendimiento.

Carlos Pitre

student•

Now:

useMemo

Daniel Felipe Merchan Fuquen

student•

Hola, Carlos. useMemo no es lo mismo a React.memo. [useMemo](https://es.react.dev/reference/react/useMemo) permite guardar en caché el resultado de un cálculo entre renderizados, por ejemplo, el resultado de una función y [React.memo](https://es.react.dev/reference/react/memo) permite saltar el rerenderizado de un componente cuando sus props no han cambiado.