Käyttötarkoitus
Käytä useThrottle-hookkia, kun haluat rajoittaa funktion suorituksen yhteen kertaan annetun aikaikkunan sisällä, esim. kerran sekunnissa.
Se on hyödyllinen esimerkiksi usein toistuvissa DOM-tapahtumissa tai kun tapahtuman käsittelyssä on hidasta laskentaa.
Esimerkki
function UseThrottleExample() {
const [eventCount, setEventCount] = useState(0);
const [throttledEventCount, setThrottledEventCount] = useState(0);
const { throttled } = useThrottle(() => setThrottledEventCount((prev) => prev + 1), 250);
const handleScroll = () => {
setEventCount((prev) => prev + 1);
throttled();
};
return (
<>
<Text>
Scroll-tapahtumat: <strong>{eventCount}</strong>
</Text>
<Text>
Scroll-tapahtumat (throttled): <strong>{throttledEventCount}</strong>
</Text>
<div style={{ width: "100%", height: "300px", overflowY: "auto" }} onScroll={handleScroll}>
<div style={{ height: "100000px", overFlowY: "scroll", backgroundColor: "rgba(255,0,255,.25)" }}></div>
</div>
</>
);
}