Käyttötarkoitus
Käytä useDebounce-hookia, kun haluat yhdistää tietyn aikaikkunan sisällä tapahtuvat funktiokutsut yhdeksi. Se on hyödyllinen
esimerkiksi usein toistuvissa DOM-tapahtumissa tai kun tapahtuman käsittelyssä on hidasta laskentaa.
Esimerkki
function UseDebounceExample() {
const [eventCount, setEventCount] = useState(0);
const [debouncedEventCount, setDebouncedEventCount] = useState(0);
const debouncedUpdate = useDebounce(() => setDebouncedEventCount(debouncedEventCount + 1), 250);
const handleScroll = () => {
setEventCount(eventCount + 1);
debouncedUpdate();
};
useEffect(() => {
return () => {
debouncedUpdate.cancel();
};
}, []);
return (
<>
<Text>
Scroll-tapahtumat: <strong>{eventCount}</strong>
</Text>
<Text>
Scroll-tapahtumat (debounced): <strong>{debouncedEventCount}</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>
</>
);
}