while building infinite loading via API in REACT , the page number is not updating in console even when i scroll down a lot

Question

I have a very basic issue that is not working. I am building infinite scoller in reactJS and i have wriiten few codes by myself but i am stuck because whenever i scroll down the page number in console is printed 2 and its not getting updated even when i scroll many times. Can someone tell me why my console is not incrementing more than 2 and how can i fix that ?

here is my code::

import React, {useState, useEffect} from 'react';
import axios from "axios";

const Lists = () => {
      const [page, setPage] = useState(1);
      const [manifestList, setManifestList] = useState([]);
      const [isFetching, setIsFetching] = useState(false);

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

      // eslint-disable-next-line react-hooks/exhaustive-deps
      function getManifests(pageNo){
          axios.get("http://localhost:3002/posts", { params: { _page: pageNo, _limit:20 } }).then(res => {
                console.log("data...", res.data);
                setManifestList([...manifestList, ...res.data]);
                setIsFetching(false);
          });
      }

      useEffect(() => {
        getManifests(page);
      }, []);

      useEffect(() => {
        if (!isFetching){
          return;
        }
        getManifests(page);

      }, [isFetching]);

      function handleScroll() {
        if (
          window.innerHeight + document.documentElement.scrollTop !==
            document.documentElement.offsetHeight ||
          isFetching
        )
          return;
          console.log("bottom hit...");
          let pageN = page + 1;
          setPage(pageN);
          setIsFetching(true);
      }

  console.log("page Number..", page);  //here it prints first time 1 and all other time 2 only

  return (
    <div>Arjun and shiva best amigos third..fifth
      <ul className="list-group mb-2">
        {manifestList.map((listItem, i) => <li key={i} className="list-group-item"> {listItem.title}</li>)}
      </ul>

    </div>
  );
};

export default Lists;

Answer 1

This is a good question. Please see my solution, its the best you get.

import React, { useState, useEffect } from "react";


function Lists() {
  const [posts, setPosts] = useState([]);
  const [freshposts, setFreshposts] = useState([]);
  const [isFetching, setIsFetching] = useState(false);
  const [page, setPage] = useState(1);
  const limit = 7;

  const getPosts = async () => {
    // setIsFetching(true)
    console.log("api request called....");

    const response = await fetch(
      `https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`
    );
    const data = await response.json();
    setFreshposts(data);
    setPosts([...posts, ...data]);
    setIsFetching(false);

  };

  function handleScroll() {
    if (
      window.innerHeight + document.documentElement.scrollTop !==
      document.documentElement.offsetHeight
    )
      return;
    setIsFetching(true);
  }

  function getMorePosts() {
    // setTimeout(() => {
      setPage(page + 1);
      getPosts();
    // }, 2000);
  }

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

  useEffect(
    () => {
      getPosts();
    },[]);

  useEffect(() => {
    if (!isFetching) return;
    if(freshposts.length > 0){
        getMorePosts();
        console.log("CHECK RE RENDER...");

    }
  }, [isFetching]);

  return (
    <div className="App">
      {posts.map((post, index) => (
        <div key={index} className="post">
          <div className="number">{post.id}</div>
          <div className="post-info">
            <h2 className="post-title">{post.title}</h2>
            <p className="post-body">{post.body}</p>
          </div>
        </div>
      ))}
      {isFetching && freshposts.length > 0 && (
        <div className="spinner-border" role="status">
            <span className="sr-only">Loading...</span>
        </div>
      )}
    </div>
  );
 }

export default Lists;