Usestate increment by 1 not working in setInterval

Question

    const [currentPage, setCurrentPage] = useState(1);     
    const handleScroll = () => {
            const gridContainer = document.querySelector(".grid");
    
            const totalPages = Math.ceil(
                gridContainer.scrollWidth / gridContainer.clientWidth + -0.1
            );
            setTotalPages(totalPages);
    
            const scrollPos =
                gridContainer.clientWidth + gridContainer.scrollLeft + 2;
            if (gridContainer.scrollWidth > scrollPos) {
                gridContainer.scrollBy({
                    left: gridContainer.clientWidth + 20.5,
                    behavior: "auto",
                    block: "center",
                    inline: "center",
                });
                setCurrentPage(currentPage + 1);
            } else {
                setCurrentPage(1);
                gridContainer.scrollTo(0, 0);
            }
        };
    
        useEffect(() => {
            setInterval(() => {
                document.querySelector(".grid") && handleScroll();
            }, 5000);
        }, []);

For some reason this will never go past two when I run the setCurrentPage but if I increment it like this

 <button onClick={() => setCurrentPage(currentPage + 1)}>
                    +1
  </button

It works as expected. I am guessing it has something to do with the useEffect or the setInterval but not really a 100% sure why.

Answer 1

A new handleScroll function is created on every render in your code.

The function is passed to setInterval only the first time, so the currentPage inside this function will always stay 1 , then 1 + 1 is always 2 .

(A) Put handleScroll into the dependency array

A solution would be to create a new setInterval whenever there is a new handlescroll :

    useEffect(() => {
        let interval = setInterval(() => {   // <--- store the interval (to be able to remove it later)
            document.querySelector(".grid") && handleScroll();
        }, 500);

        // -- remove the interval inside the clean up function of useEffect
        return () => {
            clearInterval( interval );
        }
    }, [ handleScroll ]); // <--- add handleScroll to the dependency array

Obviously, in this case a setTimeout might be a better choice, as it always runs only once anyway.

(B) Pass a function to setState

Alternatively you can pass a function to setState :

setCurrentPage((prevCurrentPage) => prevCurrentPage + 1);

That is generally totally ok, but be careful not to lie about your effect's dependencies .