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.

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•

¿Debes memoizar todos los componentes?

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•

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

Introducción

Optimización de JavaScript con Grandes Datasets en Next.js

Throttling y Debouncing

Optimización de Búsquedas con Throttle y Debounce en Next.js

Implementación de Debounce en React con Hooks y JavaScript

Optimización de Debounce y Throttle en React con LowDash

Cache en memoria

Optimización de Caché en Aplicaciones React con ReactQuery y SWR

Optimización de búsqueda en JavaScript: Arrays vs. Objetos

Memoización

Optimización de Componentes en React con Memoización

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

Scrolling

Optimización de Scroll con ReactWindow y Intersection Observer

Conclusiones

Optimización de Rendimiento en React con Throttling y Debouncing