Throttle Debounce
import { useEffect, useState } from "react";
const throttleFunction = (func, delay) => {
let lastCall = 0;
return function () {
let currentTime = new Date().getTime();
if (currentTime - lastCall > delay) {
func();
lastCall = currentTime;
}
};
};
export default function App() {
const [text, setText] = useState("");
const handleClick = throttleFunction(() => {
console.log("clicked");
}, 1000);
useEffect(() => {
let id = setTimeout(() => {
console.log("Do api call " + text);
}, 2000);
return () => {
clearTimeout(id);
};
}, [text]);
const resizeListener = throttleFunction(() => {
console.log("resize");
}, 2000);
useEffect(() => {
window.addEventListener("resize", resizeListener);
return () => {
window.removeEventListener("resize", resizeListener);
};
}, []);
return (
<div className="App">
<input onChange={(e) => setText(e.target.value)} />
<div>{text}</div>
<button onClick={handleClick}> Test Throttle </button>
</div>
);
}
Last updated