Cómo usar el gancho useCallback React

Descubra para qué es útil el gancho useCallback 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 esuseCallback.

import React, { useCallback } from 'react'

Este gancho es útil cuando tiene un componente con un hijo que se vuelve a renderizar con frecuencia y le pasa una devolución de llamada:

import React, { useState, useCallback } from 'react'

const Counter = () => { const [count, setCount] = useState(0) const [otherCounter, setOtherCounter] = useState(0)

const increment = () => { setCount(count + 1) } const decrement = () => { setCount(count - 1) } const incrementOtherCounter = () => { setOtherCounter(otherCounter + 1) }

return ( <> Count: {count} <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={incrementOtherCounter}>incrementOtherCounter</button> </> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

El problema aquí es que cada vez que se actualiza el contador, las 3 funciones se vuelven a crear.

Puede visualizar esto creando una instanciaEstablecer estructura de datosy agregarle cada función. ¿Por qué establecer? porque solo almacena elementos únicos, lo que en nuestro caso significa funciones diferentes (instanciadas de forma única).

import React, { useState, useCallback } from 'react'

const functionsCounter = new Set()

const Counter = () => { const [count, setCount] = useState(0) const [otherCounter, setOtherCounter] = useState(0)

const increment = () => { setCount(count + 1) } const decrement = () => { setCount(count - 1) } const incrementOtherCounter = () => { setOtherCounter(otherCounter + 1) }

functionsCounter.add(increment) functionsCounter.add(decrement) functionsCounter.add(incrementOtherCounter)

alert(functionsCounter)

return ( <> Count: {count} <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={incrementOtherCounter}>incrementOtherCounter</button> </> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

Si prueba este código, verá que la alerta se incrementa en 3 a la vez.

En cambio, lo que debería suceder es que si incrementa un contador, todas las funciones relacionadas con ese contador deberían volver a instanciarse.

Si otro valor de estado no cambia, no debe tocarse.

Ahora, en la mayoría de los casos, esto no es un gran problema a menos que esté pasando muchas funciones diferentes, todas cambiando bits de datos no relacionados, que han demostrado ser un gran costo para el rendimiento de su aplicación.

Si eso es un problema, puede usaruseCallback.

Así es como lo hacemos. En vez de:

const increment = (() => {
  setCount(count + 1)
})
const decrement = (() => {
  setCount(count - 1)
})
const incrementOtherCounter = (() => {
  setOtherCounter(otherCounter + 1)
})

Envuelve todas esas llamadas en:

const increment = useCallback(() => {
  setCount(count + 1)
}, [count])
const decrement = useCallback(() => {
  setCount(count - 1)
}, [count])
const incrementOtherCounter = useCallback(() => {
  setOtherCounter(otherCounter + 1)
}, [otherCounter])

Asegúrese de agregar esa matriz como segundo parámetro auseCallback()con el estado necesario.

Ahora, si intenta hacer clic en uno de los contadores, solo se volverán a crear instancias de las funciones relacionadas con el estado de los cambios.

Puede probar este ejemplo en Codepen:

Ver la plumaReaccionar useCallback hookpor Flavio Copes (@flaviocopios) enCodePen.

Tech Wiki Online!