Saltar al contenido

Cuando al uso Reaccionar useMemo gancho con ExamplesNov, 16thIn este tutorial, vamos a aprender acerca de cuándo usar reaccionan gancho …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cuándo usar reaccionar useMemo gancho () con los ejemplos helpof.

useMemo gancho

El useMemo gancho se utiliza para memoize el valor de retorno de la función, de manera que sólo se vuelve a calcular la función thevalue cuando uno de sus dependencias se cambian.

En primer lugar, vamos a ver un ejemplo sin utilizar useMemo gancho.

import React, { useState} from "react";

function Welcome() {
const [msg, setMsg] = useState("hello");
const reverseMsg = () => { return msg.split("").reverse().join(""); } return (

{msg}

{reverseMsg()}

{reverseMsg()}

);
}

export default Welcome;

En lo anterior, hemos utilizado la función reverseMsg () en dos lugares, pero las dos veces que está ejecutando la función para obtener el mismo resultado.

Ahora, vamos a terminar con la función con useMemo () gancho.

import React, { useState} from "react";

function Welcome() {
const [msg, setMsg] = useState("hello");
const reverseMsg = useMemo(() => { return msg.split("").reverse().join(""); },[msg]); //msg is dependency
return (

{msg}

{reverseMsg}

{reverseMsg}

);
}

export default Welcome;

En el código anterior, que envuelve la función con useMemo () de gancho y devuelve un valor memoized o valor almacenado en caché, que se almacena dentro de la variable reverseMsg.

Ahora podemos utilizar reverseMsg en múltiples lugares, pero la función sólo se ejecutará una vez y la próxima vez que devolverá el valor inmediato de la caché.

El useMemo de enlace sólo se volverá a ejecutar la función de nuevo cuando una de sus dependencias se cambian.

Esto significa que si se hace clic en un botón de cambio de mensajes que se actualice la propiedad msg. por lo que la dependencia useMemo gancho se cambia y vuelve a ejecutar de nuevo la función para obtener el nuevo valor almacenado en caché.