Gancho de devolución de llamada de uso de ReactJS

El enlace useCallback se usa cuando tiene un componente en el que el niño se vuelve a renderizar una y otra vez sin necesidad.

Pase una devolución de llamada en línea y una array de dependencias. useCallback devolverá una versión memorizada de la devolución de llamada que solo cambia si una de las dependencias ha cambiado. Esto es útil cuando se pasan devoluciones de llamada a componentes secundarios optimizados que se basan en la igualdad de referencia para evitar representaciones innecesarias.

Sintaxis:

const memoizedCallback = useCallback(
 () => {
   doSomething(a, b);
 },
 [a, b],
);

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Sin useCallback Hook: el problema es que una vez que se actualiza el contador, las tres funciones se vuelven a crear. La alerta aumenta en tres a la vez, pero si actualizamos algunos estados, todas las funciones relacionadas con esos estados solo deberían volver a instanciarse. Si otro valor de estado no cambia, no debe tocarse. Aquí, el nombre del archivo es App.js

import React, { useState, useCallback } from 'react'
const funccount = new Set();
const App = () => {
 
 
  const [count, setCount] = useState(0)
  const [number, setNumber] = useState(0)
 
  const incrementCounter = () => {
    setCount(count + 1)
  }
  const decrementCounter = () => {
    setCount(count - 1)
  }
   
   const incrementNumber = () => {
    setNumber(number + 1)
  }
   
funccount.add(incrementCounter);
funccount.add(decrementCounter);
funccount.add(incrementNumber);
alert(funccount.size);
 
  return (
    <div>
      Count: {count}
      <button onClick={incrementCounter}>
        Increase counter
      </button>
      <button onClick={decrementCounter}>
         Decrease Counter
      </button>
      <button onClick={incrementNumber}>
        increase number
      </button>
    </div>
  )
}
 
 
export default App;

Con gancho useCallback: Para solucionar este problema podemos usar el gancho useCallback. Aquí, el nombre del archivo es App.js.

import React, { useState, useCallback } from 'react'
var funccount = new Set();
const App = () => {
 
 
  const [count, setCount] = useState(0)
  const [number, setNumber] = useState(0)
 
const incrementCounter = useCallback(() => {
  setCount(count + 1)
}, [count])
const decrementCounter = useCallback(() => {
  setCount(count - 1)
}, [count])
const incrementNumber = useCallback(() => {
  setNumber(number + 1)
}, [number])
   
funccount.add(incrementCounter);
funccount.add(decrementCounter);
funccount.add(incrementNumber);
alert(funccount.size);
 
  return (
    <div>
      Count: {count}
      <button onClick={incrementCounter}>
         Increase counter
      </button>
      <button onClick={decrementCounter}>
         Decrease Counter
      </button>
      <button onClick={incrementNumber}>
         increase number
      </button>
    </div>
  )
}
 
 
export default App;

Salida: como podemos ver en la siguiente salida, cuando cambiamos el estado ‘recuento’, se volverán a instanciar dos funciones, por lo que el tamaño del conjunto aumentará en 2 y cuando actualicemos el estado ‘número’, solo se volverá a instanciar una función. y el tamaño del conjunto aumentará en uno solo.