Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Diferencia Entre los Hooks useMemo() y useState() en React JS

Los hooks personalizados son esenciales en React JS. Cada componente que muestra y actualiza datos tiene su propio estado con una función de establecimiento y una fase real. Cuando empiezas a usar React llegas a conocer los hooks y con el paso del tiempo descubres otros hooks como useState() y useEffect(). Pero es importante saber cual es la diferencia que hay entre estos para poder aplicarlos en nuestros proyectos, en este Post te enseñare Cual es La Diferencia Entre los Hooks useMemo() y useState() en React JS, vamos con ello.

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Porque Algunos Desarrolladores no Terminan El Proyecto de Un Cliente” (En Spotify, Sound Cloud y Apple Podcasts)y “Ventajas y Desventajas de Usar 2 o Más Monitores Para un Desarrollador” (Anchor Podcast)

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Diferencia Entre los Hooks useMemo() y useState() en React JS.

Diferencia Entre los Hooks useMemo() y useState() en React JS

Hace unas semanas estuve trabajando en un proyecto con Next.js en lugar de React y durante el proceso me aparecio un advertencia interesante de la cual debia deshacerme. Cuando simplemente quería guardar un valor en una variable para la interfaz de usuario, mi aplicación dejó caer la siguiente advertencia:


Entonces sentí mucha curiosidad sobre el hook useMemo(), especialmente porque después de leer la advertencia, quedó muy claro que debería usar algo que tenga dependencias para actualizar si es necesario.

Descubrí que si declaras el estado con un valor inicial para usar useState() con useEffect():


Luego cuando algunos otros estados cambien, podemos usar en hook useEffect() con dependencias para actualizar el estado:


Eso fue sencillo, pero en un escenario más realista es cuando se necesita mostrar y actualizar datos de una API en la interfaz de usuario. Debes recuperar los datos, guardados en un estado e implementar una función de actualización:


Pero, ¿ Qué pasa si solo queremos mostrar datos en lugar de mostrarlos y actualizarlos ? La función setState() entonces será inútil; solo se llamará en el primer render para establecer el estado y eso será todo, no más actualizaciones.

Aquí es donde el hook useMemo() entra en juego. Este hook es similar a un estado, pero sin la función de establecimiento y es más útil cuando solo deseamos mostrar datos en la interfaz de usuario, pero deseamos que sea reactivo (gracias a la matriz de dependencia useEffec()).

Entonces, digamos que solo queremos mostrar información de la API y queremos usar el hook useMemo() para eso:


Y eso es todo lo que hay que hacer. Escribes menos código y más limpio, pero aún tienes una variable reactiva, por lo que cuando el valor de data cambia, el valor de title cambia también.

Conclusión

En conclusión, la principal diferencia aquí entre useState() y useMemo() esta determinada por la necesidad de actualizar datos.

Nota (s)

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos. 

Salir de la versión móvil