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

4 minuto(s)

En esta página:

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:


# Mensaje Original 
The ... object makes the dependencies of useEffect Hook
change on every render. To fix this, wrap the initialization
of ... in its own useMemo() Hook. 

# Traducido al español 
El objeto ... hace que las dependencias del Hook useEffect 
cambien en cada renderizado. Para solucionar esto, ajuste la inicialización 
de... en su propio Hook useMemo().

# Mensaje Original

The ... object makes the dependencies of useEffect Hook

change on every render. To fix this, wrap the initialization

of ... in its own useMemo() Hook.

# Traducido al español

El objeto ... hace que las dependencias del Hook useEffect

cambien en cada renderizado. Para solucionar esto, ajuste la inicialización

de... en su propio Hook useMemo().

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():


const [state, setState] = useState(null)

const [state, setState] = useState(null)

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


useEffect(() => {
  setState(state + 1)
}, [dependencias])

useEffect(() => {

setState(state + 1)

}, [dependencias])

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:


const [datos, setData] = useState(null) 
const [titulo, setTitle] = useState('')
useEffect(() => { 
  const _data = fetch… 
  setData(_data) 
  setTitle(_data.titulo) 
}, []) 

// Un array de dependencia vacía significa que se ejecutará una vez cuando se monte el componente
const actualizar = () => { 
  const newData = Object.assign(data, { titulo }) 
  setData(newData) 
  // …y guardar en la base de datos 
}
return( 
  <div> 
  <h1>{titulo}</h1> 
  <formulario> 
    <input onChange={(e) => setTitle(e.target.value)} type='text' name='titulo'> 
    <button onClick={() => actualizar()}>¡Título Actualizado!</button> 
  </form> 
</div> 
)

const [datos, setData] = useState(null)

const [titulo, setTitle] = useState('')

useEffect(() => {

const _data = fetch…

setData(_data)

setTitle(_data.titulo)

}, [])

// Un array de dependencia vacía significa que se ejecutará una vez cuando se monte el componente

const actualizar = () => {

const newData = Object.assign(data, { titulo })

setData(newData)

// …y guardar en la base de datos

}

return(

<div>

<h1>{titulo}</h1>

<input onChange={(e) => setTitle(e.target.value)} type='text' name='titulo'>

<button onClick={() => actualizar()}>¡Título Actualizado!</button>

</form>

</div>

)

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:


// recuperacion de datos...
const title = useMemo(() => { 
  return data.title 
}, [data])

// recuperacion de datos...

const title = useMemo(() => {

return data.title

}, [data])

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.