Traté de implementar la funcionalidad de rebote en el componente funcional de reacción. Pero debido a alguna razón, no está funcionando.
import React from "react"; import "./styles.css"; export default function App() { const [random, setRandom] = React.useState(Math.random()); const changeKey = () => { setRandom(Math.random()); }; const debounce = (func, timeout = 1000) => { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, timeout); }; }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <button onClick={() => { debounce(changeKey(), 2000); }} > <p>Click Me!</p> </button> {random} </div> ); }aquí he agregado el enlace de codesandbox https://codesandbox.io/s/silent-silence-6i532c?file=/src/App.js:0-857
Considere implementarlo con un gancho. Este, useDebounce de react-use es muy bueno. https://github.com/streamich/react-use/blob/master/docs/useDebounce.md