Not Able to access updated state in react

Question

I am not able to access my updated state in a function. Here is my scenario:

I have a getImages() function which gets called when either the component loads for the first time or the user reaches to the end of the page while scrolling to fetch new images via API call. On first time component load, I want to give the random page value that's why I am passing a random number from first useEffect hook and when user reaches to the end of page, I want to make use of pageNum state. But every time while reaching to the end of page, the pageNum value is coming as 0 in the API call as well as in the console log. I was expecting the updated pageNum state as everytime in the end of getImages() function, pageNum state is getting incremented by 1. I checked react dev tools and there the pageNum state is updating correctly.

Here is the snippet of my code:

The images state is updating correct, it is making use of existing state and appending new images on every call.

    const [images, setImages] = useState([]);

    const [pageNum, setPageNum] = useState(0);
 
    useEffect(() => {
        getImages(Math.floor(Math.random() * 100) + 1);
    }, []);

    useEffect(() => {
        window.addEventListener("scroll", () => {
            if((window.innerHeight + window.scrollY) === document.body.scrollHeight){
                getImages();
            }
        });
        
    }, []);

    async function getImages(pageNo){
        let response;
        console.log(pageNum);
        if(pageNo === undefined){
            response = await fetch(`<API URL>&page=${pageNum}`);
        }
        else{
            response = await fetch(`<API URL>&page=${pageNo}`);
        }
        const data = await response.json();

        setImages(function(currentState){
            return [...currentState, ...data];
        });
        setPageNum(function(currentState){
            return currentState + 1;
        });
    }

Please let me know if I am missing out anything.

Answer 1

Reason:

The problem happened bc you not put pageNum as useEffect dependencies. because you add event listener at when component mount for first time ( pageNum is 0 that time). And because you not adding pageNum to useEffect dependencies pageNum value will never update.

Solution:

const [images, setImages] = useState([]);

    const [pageNum, setPageNum] = useState(0);
 
    useEffect(() => {
        getImages(Math.floor(Math.random() * 100) + 1);
    }, []);

    useEffect(() => {
        const fetchImgOnCrollHandler = () => {
            if((window.innerHeight + window.scrollY) === document.body.scrollHeight){
                getImages();
            }
        }
        window.addEventListener("scroll", fetchImgOnScrollHandler);
        return () => {
          window.removeEventListener('scroll', fetImgOnScrollHandler);
        }
    }, [pageNum]);

    async function getImages(pageNo){
        let response;
        console.log(pageNum);
        if(pageNo === undefined){
            response = await fetch(`<API URL>&page=${pageNum}`);
        }
        else{
            response = await fetch(`<API URL>&page=${pageNo}`);
        }
        const data = await response.json();

        setImages(function(currentState){
            return [...currentState, ...data];
        });
        setPageNum(function(currentState){
            return currentState + 1;
        });
    }

Now everytime pageNum update. scroll event attached to window will be removed and add new one with new pageNum to it