useEffect triggers everything-CodePudding

Hi just trying to learn about hooks inside a Next.JS project. Have implemented a useEffect to listen for scrolling behavior with the goal of displaying different content in a header is the page is scrolled.

const [ scrollY, setScrollY ] = useState(0);

useEffect(() => {
        const handleScroll = () => {
            setScrollY(window.scrollY);
        };
        handleScroll();
        
        window.addEventListener("scroll", handleScroll);
        return () => {
            window.removeEventListener("scroll", handleScroll);
        };
    }, []);

Then i just have something like

<div className={scrollY > 20 ? 'scrolled': null}>

This works for its purpose but an unintended effect is that scrolling is now additionally triggering everything in the component, so for example if I have console.logs outwith the useEffect they would get triggered on every scroll of the page. Is it possible to have my UE purely update the scrollY state?

Example of an issue would be:

const [ scrollY, setScrollY ] = useState(0);
const test = "test";
console.log(test);

useEffect(() => {
        const handleScroll = () => {
            setScrollY(window.scrollY);
        };
        handleScroll();
        
        window.addEventListener("scroll", handleScroll);
        return () => {
            window.removeEventListener("scroll", handleScroll);
        };
    }, []);

Test would be logged repeatedly on every scroll.

CodePudding user response：

It will trigger many times,because every time you scroll,the function component would be called,and the view would update.

CodePudding user response：

You use State in your Component. When you call the setScrollY(), you are updating the State, which triggers a re-render of your component.

If you want to use console.log to log the value of the scrollY, you could do it when you set scrollY instead of on each run. You should also ask yourself if scrollY needs to be stored as State, and if so, why.

CodePudding user response：

I'd suggest putting the header logic inside the scroll handler.

Like so:

const [ isScrolled, setIsScrolled ] = useState(false);

...
const handleScroll = () => {
    if (window.scrollY > 20 && !isScrolled) {
        setIsScrolled(true);
    }

    if (window.scrollY <= 20 && isScrolled) {
        setIsScrolled(false);
    }
};
...

<MyComponent attribute={isScrolled && 'scrolled'} />

This will drastically reduce the amount of rerenders by setting the state whenever the scroll position meets the required point.