He creado un método de rebote dentro de mi componente de reacción.
const [count, setCount] = useState(0); const lazyLog = useCallback( _.debounce(() => { console.log(count) }, 5000), [count] ); y lo llamo dentro de un useEffect, cada vez que se actualiza el count :
useEffect(() => { lazyLog(); }, [count]) El problema que estoy experimentando es que, como el método lazyLog se recrea en cada renderizado, la funcionalidad de debounce no se aplica correctamente.
Puedes consultar este snack para probar el código.
¿Cómo puedo arreglar el código? Como useCallback debe incluir la dependencia... No encuentro ninguna manera fácil de manejar esto... ¿alguna idea?
El estado está obsoleto ya que no está incluido en la matriz de dependencias de useCallback . Ahora si agregas que el deBounce no funcionará.
La solución es usar una ref y mantener una copia del estado en eso. Luego usa eso en el debounce . ( Códigosycaja )
Además, [count] debe estar [] en useCallback .
const refValue = useRef(count); const lazyLog = useCallback( _.debounce(() => { console.log("debounce", refValue.current); }, 2000), [] // empty ); useEffect(() => { refValue.current = count; lazyLog(); }, [count]);No me gusta el gancho useDebounce , descrito en los comentarios, en absoluto, porque quiero eliminar el rebote de la devolución de llamada y no el valor.
Creo que, para evitar problemas con el estado obsoleto, pasaré el contador como argumento, en lugar de consumirlo directamente de mi estado.
export default function App() { const [count, setCount] = useState(0); const lazyLog = useCallback( _.debounce((count) => { console.log(count); }, 5000), [] ); useEffect(() => { lazyLog(count); }, [count]) return ( <View> <Text onPress={() => setCount(prevCount => prevCount + 1)}> Increase </Text> </View> ); }https://snack.expo.dev/67W9HnsRD
No es tan limpio como podría ser, pero funciona bien con algunos cambios mínimos.