Cómo utilizar el gancho useCallback de React

 

 

 

Como utilizar el gancho usecallback de react 1

¡Descubre para qué sirve el gancho useCallback de React y cómo trabajar con él!

Primero, consulta mi introducción a los ganchos de React, si eres nuevo en ellos.

Un gancho de React que a veces uso es useCallback.

import React, { useCallback } from 'react'

Este gancho es útil cuando tienes un componente con un elemento secundario que se vuelve a renderizar con frecuencia y le pasas 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 tres funciones se vuelven a crear.

 

Puedes visualizar esto creando una instancia de una estructura de datos Set y agregando cada función. ¿Por qué Set? 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 aumenta de 3 en 3. Fotos Porno y actrices porno

Lo que debería suceder en cambio es que si se incrementa un contador, todas las funciones relacionadas con ese contador deben volver a instanciarse.

Si otro valor de estado no cambia, no se debe tocar.

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

Si esto es un problema, puedes utilizarlo useCallback.

Así es como lo hacemos. En lugar 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 useCallback()con el estado necesario.

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

Puedes probar este ejemplo en Codepen: https://codepen.io/flaviocopes/pen/VJQwzb/




Tal vez te puede interesar:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. Cómo comprobar si un elemento DOM tiene una clase

Cómo utilizar el gancho useCallback de React

Primero, consulta mi introducción a los ganchos de React, si eres nuevo en ellos. ¡Descubre para qué sirve el gancho useCallback de React y cómo trabajar c

programar

es

https://aprendeprogramando.es/static/images/programar-como-utilizar-el-gancho-usecallback-de-react-2043-0.jpg

2024-11-01

 

Como utilizar el gancho usecallback de react 1
Como utilizar el gancho usecallback de react 1

 

 

Update cookies preferences