Y scroll event listener useEffect

Question

My code underneath is a simple React component that sets a new state upon scrolling the page down. If the Y scroll exceeds a certain position it will set another state to true.

    const [ scrollPosition, setScrollPosition ] = useState(0);
    const [ confetti, setConfetti ] = useState(false);

    useEffect(
        () => {
            window.addEventListener('scroll', handleScroll, { passive: true });
            check();

            return () => {
                window.removeEventListener('scroll', handleScroll);
            };
        },
        [ scrollPosition ]
    );
    const handleScroll = () => {
        const position = window.pageYOffset;
        setScrollPosition(position);
    };
    
    const check = () => {
        if (scrollPosition > 400) {
            setConfetti(true);
        }
        if (scrollPosition < 401) {
            setConfetti(false);
        }
    };

Everything is working smoothly as expected but I was just wondering if there is a less expensive way of doing this. Re-rendering the page every time Y scroll changes seems like a very inefficient way to run this code. I don't think throttling would be a good idea either as there might be a delay when a user scrolls down really fast. Thanks to anyone who can help!

awamas · Accepted Answer · 2020-08-13 15:13:30Z

1

You don't need to save the scroll position in the state.

useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });

    return () => {
        window.removeEventListener("scroll", handleScroll);
    };
}, [scrollPosition]);
const handleScroll = () => {
    const position = window.pageYOffset;
    if (position > 400) {
        setConfetti(true);
    }
    if (position < 401) {
        setConfetti(false);
    }
};

answered Aug 13, 2020 at 15:13

awamas

263 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anjalipatodia · Accepted Answer · 2020-08-14 09:49:39Z

0

In useEffect Hook , the value pass in last array depends the call the render method. Whenever value in array change useEffect call and subsequently render method invoke. Better you remove array value.

 useEffect(
    () => {
        window.addEventListener('scroll', handleScroll, { passive: true });
        check();

        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    },
    []
);

answered Aug 14, 2020 at 9:49

anjalipatodia

1

Collectives™ on Stack Overflow

Y scroll event listener useEffect

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related