const [scrollStatus, setScrollStatus] = useState({ scrollDirection: null, scrollPos: 0 }); useEffect(() => { if (innerRef.current) { innerRef.current.addEventListener("scroll", handleScrollDocument); } return () => innerRef?.current.removeEventListener("scroll", handleScrollDocument); }, []); function handleScrollDocument() { if (!innerRef?.current) return; setScrollStatus((prev) => { // to get 'previous' value of state return { scrollDirection: innerRef.current.scrollTop > prev.scrollPos ? "down" : "up", scrollPos: innerRef.current.scrollTop }; }); }