Käyttötarkoitus
Käytä useDebounce-hookkia, 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 { debounced } = useDebounce(() => setDebouncedEventCount((prev) => prev + 1), 250);
const handleScroll = () => {
setEventCount((prev) => prev + 1);
debounced();
};
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>
</>
);
}