Käyttötarkoitus
Käytä useThrottle-hookia, 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 throttledUpdate = useThrottle(() => setThrottledEventCount(throttledEventCount + 1), 250);
const handleScroll = () => {
setEventCount(eventCount + 1);
throttledUpdate();
};
useEffect(() => {
return () => {
throttledUpdate.cancel();
};
}, []);
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>
</>
);
}