How can I properly debounce a wheel event in ReactJS? - reactjs

Question

Made a codesandbox of the issue : https://codesandbox.io/s/serene-rosalind-fcitpd?file=/src/Photo.tsx
The real problem comes when you change scroll direction, the index photo will glitch a bit ...
I have a photo gallery:https://virgile-hasselmann.vercel.app/photos. I want to switch the photos when the user scrolls up or down. To do so I thought I'd use wheelEvent and the e.deltaY. It kinda works but I had to add a useDebounce function because if not it would glitch the gallery. Here you can see the custom hook :
function useDebounce<T>(value: T, delay?: number) {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
const setDebounce = (newValue: T) => {
setTimeout(() => setDebouncedValue(newValue), delay || 500);
};
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
return () => {
clearTimeout(timer);
};
}, [value, delay]);
return { debouncedValue, setDebounce };
}
In the Gallery component, here is how I've implemented the wheel event and the debouncing :
// Init the data to display with the photos of the first category
const [photoIdx, setPhotoIdx] = useState(0);
const { debouncedValue, setDebounce } = useDebounce(photoIdx, 1000);
const setDebouncedIdx = (value: number) => {
setDebounce(value);
setPhotoIdx(debouncedValue);
};
const handleWheel = (e: WheelEvent<HTMLDivElement>) => {
if (e.deltaY > 0) {
if (photoIdx < dataSelected!.length - 1) {
setDebouncedIdx(photoIdx + 1);
} else {
setDebouncedIdx(0);
}
} else {
if (photoIdx > 0) {
setDebouncedIdx(photoIdx - 1);
} else {
setDebouncedIdx(dataSelected!.length - 1);
}
}
};
But the result does not satisfy me the least: it's glitchy and not really responding the user's input + if you try to go back by scrolling back, it will first show you the next photo before going back to it. Hard to explain word but it's quite clear if you look at the index at the bottom left corner.
Perhaps there is a better way of implementing it. The problem is unclear to me if anyone could enlighten me that would much appreciated :)

Answer 1

I think you can use an eventListener to detect if the user is scrolling. You can detect the direction of the scrolling too. So if the user scrolls down then you replace the image with the next one. Or scroll up then replace it with the previous one.
The threshold is used to determine how much you want to scroll before taking an action.
useEffect(() => {
//Scroll listener to determine the scroll direction
const threshold = 0;
let lastScrollY = window.scrollY;
let scrollDir = "";
const updateScrollDir = () => {
const scrollY = window.scrollY;
if (Math.abs(scrollY - lastScrollY) < threshold) {
return;
}
scrollDir = (scrollY > lastScrollY ? "scrolling down" : "scrolling up");
lastScrollY = scrollY > 0 ? scrollY : 0;
if (scrollDir == "scrolling up") {
//Do something to display the previous image
}
if (scrollDir == "scrolling down") {
//Do something to display the next image
}
};
const onScroll = () => {
window.requestAnimationFrame(updateScrollDir);
};
window.addEventListener("scroll", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
}
},