React JS useMemo Hook

El useMemo es un gancho utilizado en el componente funcional de reaccionar que devuelve un valor memorizado. En Ciencias de la Computación, la memoización es un concepto que se usa en general cuando no necesitamos volver a calcular la función con un argumento dado para la próxima vez, ya que devuelve el resultado almacenado en caché. Una función memorizada recuerda los resultados de salida para un conjunto dado de entradas. Por ejemplo, si hay una función para sumar dos números, y damos el parámetro como 1 y 2 por primera vez, la función sumará estos dos números y devolverá 3, pero si vuelven a aparecer las mismas entradas, devolveremos el caché. valor, es decir, 3 y no vuelva a calcular con la función de suma. En React también usamos este concepto, cada vez que en el componente React, el estado y los accesorios no cambian el componente y el componente no se vuelve a renderizar, muestra el mismo resultado.

Sintaxis:

const memoizedValue = useMemo(functionThatReturnsValue, 
                                   arrayDepencies)

Ejemplo : cuando no usamos el useMemo Hook.

import React, {useState} from 'react';
  
function App() {
  const [number, setNumber] = useState(0)
  const squaredNum =  squareNum(number);
  const [counter, setCounter] = useState(0);
  
 // Change the state to the input
  const onChangeHandler = (e) => {
    setNumber(e.target.value);
  }
    
  // Increases the counter by 1
  const counterHander = () => {
    setCounter(counter + 1);
  }
  return (
    <div className="App">
      <h1>Welcome to Geeksforgeeks</h1>
      <input type="number" placeholder="Enter a number" 
        value={number} onChange={onChangeHandler}>
      </input>
        
      <div>OUTPUT: {squaredNum}</div>
      <button onClick= {counterHander}>Counter ++</button>
      <div>Counter : {counter}</div>
    </div>
  );
}
  
// function to square the value
function squareNum(number){
  console.log("Squaring will be done!");
  return Math.pow(number, 2);
}
  
export default App;

Salida: En el ejemplo anterior, tenemos un componente de aplicación y este componente está haciendo dos cosas, una es elevar al cuadrado un número en la entrada dada e incrementar el contador. Tenemos dos estados aquí, número y contador, cada vez que cualquiera de los estados cambia, el componente se vuelve a renderizar. Por ejemplo, si cambiamos el valor de entrada del número, se ejecuta la función squareNum, y si incrementamos el contador nuevamente, se ejecuta la función squareNum. Podemos ver esto en la consola. 

En este caso, podemos ver que incluso si cambiamos el número de entrada una vez, pero hicimos clic en el contador de incrementos varias veces, nuestra función squareNum se ejecutó cada vez que hicimos clic en el botón del contador de incrementos varias veces. Esto sucede porque el componente de la aplicación se vuelve a renderizar cada vez que cambiamos el estado del contador.

Ahora resolvamos este problema usando el gancho useMemo.

Ejemplo: Cuando usamos useMemo Hook

import React, {useState} from 'react';
  
function App() {
  const [number, setNumber] = useState(0)
  // Using useMemo
  const squaredNum = useMemo(()=> {
    return squareNum(number);
  }, [number])
  const [counter, setCounter] = useState(0);
  
 // Change the state to the input
  const onChangeHandler = (e) => {
    setNumber(e.target.value);
  }
    
  // Increases the counter by 1
  const counterHander = () => {
    setCounter(counter + 1);
  }
  return (
    <div className="App">
      <h1>Welcome to Geeksforgeeks</h1>
      <input type="number" placeholder="Enter a number"
          value={number} onChange={onChangeHandler}>
      </input>
        
      <div>OUTPUT: {squaredNum}</div>
      <button onClick= {counterHander}>Counter ++</button>
      <div>Counter : {counter}</div>
    </div>
  );
}
  
// function to square the value
function squareNum(number){
  console.log("Squaring will be done!");
  return Math.pow(number, 2);
}
  
export default App;

Salida: ahora, en el ejemplo anterior, hemos usado el gancho de memo de usuario, aquí la función que devuelve el valor, es decir, squareNum se pasa dentro de useMemo y dentro de las dependencias de la array, hemos usado el número como squareNum se ejecutará solo cuando el número cambios. Si aumentamos el contador y el número sigue siendo el mismo en el campo de entrada, el número cuadrado no vuelve a ejecutarse. Veamos la salida a continuación.

Ahora podemos ver en la consola que el número cuadrado se ejecuta solo cuando hay un cambio en el cuadro de entrada y no cuando se hace clic en el botón del contador de incrementos.

Nota: La memorización nunca es gratis, estamos intercambiando espacio por tiempo.