Cómo utilizar el gancho useMemo React

Descubra para qué es útil el gancho useMemo React y cómo trabajar con él.

Echa un vistazo a miIntroducción a React Hooksprimero, si eres nuevo en ellos.

Un gancho de React que a veces uso esuseMemo.

import React, { useMemo } from 'react'

Este gancho se utiliza para crear un valor memorizado.

Este gancho es muy similar auseCallback, la diferencia es queuseCallbackdevuelve una devolución de llamada memorizada yuseMemodevuelve un valor memorizado, el resultado de esa llamada a la función. El caso de uso también es diferente.useCallbackse utiliza para devoluciones de llamada que se pasan a componentes secundarios.

A veces hay que calcular un valor, ya sea mediante un cálculo complejo o llegando a la base de datos para realizar una consulta costosa oa la red.

Usando este gancho, esta operación se realiza solo una vez, luego el valor se almacenará en el valor memorizado y la próxima vez que desee hacer referencia a él, lo obtendrá mucho más rápido.

He aquí cómo usarlo:

const memoizedValue = useMemo(() => expensiveOperation())

Asegúrese de agregar esa matriz vacía como segundo parámetro parauseMemo(), de lo contrario no se producirá ninguna memorización.

Si necesita pasar argumentos, también debe pasarlos en la matriz:

const memoizedValue = useMemo(() => expensiveOperation(param1, param2), [param1, param2])

Si uno de los parámetros cambia cuando intenta acceder al valor, el valor, por supuesto, se calculará sin memorizar.

Descarga mi gratisReact Handbook

Cómo utilizar el gancho useMemo React

Descubra para qué es útil el gancho useMemo React y cómo trabajar con él.

Más tutoriales de react: