El enlace useCallback se usa cuando tiene un componente cuyo elemento secundario se procesa una y otra vez innecesariamente.
Pase una devolución de llamada en línea y un rango de dependencias. useCallback devolverá una versión de recordatorio de la devolución de llamada que solo cambia si una de las dependencias ha cambiado. Esto es útil cuando se realizan devoluciones de llamada a componentes secundarios optimizados que se basan en la igualdad de referencia para evitar una representación innecesaria.
Sintaxis:
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);Creación de una 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: Se verá como lo siguiente.
Sin usar Callback Hook: El problema es que una vez que se actualiza el contador, las tres funciones se vuelven a crear. La alerta aumenta tres veces a la vez pero si actualizamos algún estado solo se deberían restaurar todas las funciones relacionadas con ese estado. Si el valor de otro estado no cambia, no debe tocarse. Aquí, el nombre del archivo es App.js
JavaScript
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; |
Para usar el gancho de devolución de llamada: Para solucionar este problema podemos usar el hook useCallback. Aquí, el nombre del archivo es App.js.
JavaScript
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; |
Producción: Como podemos ver en la salida a continuación, cuando cambiamos el estado ‘contar’, se restablecerán dos funciones, por lo que el tamaño establecido aumentará en 2 y cuando actualicemos el estado ‘número’, solo se restablecerá una función y el tamaño del conjuntos bajo uno.
