Code

const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const loader = useRef(null);

  useEffect(() => {
    loadMoreItems();

    const handleObserver = _.debounce((entries) => {
      const target = entries[0];
      if (target.isIntersecting) {
        setPage((prevPage) => prevPage + 1);
      }
    }, 6000);

    const observer = new IntersectionObserver(handleObserver, {
      root: null,
      rootMargin: "20px",
      threshold: 1.0,
    });

    if (loader.current) {
      observer.observe(loader.current);
    }

    return () => {
      if (loader.current) {
        observer.unobserve(loader.current);
      }
    };
  }, []);

  useEffect(() => {
    if (page > 1) {
      loadMoreItems();
    }
  }, [page]);
  const loadMoreItems = async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/posts?_page=1&_limit=10`
    );
    const newItems = await response.json();
    console.log("newitems", newItems);
    setItems((prevItems) => [...prevItems, ...newItems]);
  };