Infinite scroll in Firebase (firestore) and React.js

Next, Open src/firebase-config.js. Update this file with the following code.

 firebase-config.js 
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

const firebaseApp = firebase.initializeApp({
  apiKey: "AIzaSyA9KbtwienZo4Mw2bBgK0NOJgylyHcUqvw",
  authDomain: "react-test-a85c3.firebaseapp.com",
  projectId: "react-test-a85c3",
  storageBucket: "react-test-a85c3.appspot.com",
  messagingSenderId: "569657970297",
  appId: "1:569657970297:web:3b589cf13de06aeedc0ea8"
});

const db = firebaseApp.firestore();
export default db;

• orderBy(): sort order for your data.
• stratAfter(): start point for a query.
• limit(): number of data retrieved.

Next, Open src/App.js . Update this file with the following code.

 App.js 
import React, { useState, useEffect } from 'react';
import db from './firebase-config'
import './App.css';

const App = () => {
  const [Listofcolors, setListofcolors] = useState([]);
  const [lastKey, setLastKey] = useState();
  const [isLoading, setLoading] = useState(false);
  const [isEmpty, setEmpty] = useState(false);

  const colorRef = db.collection('users').orderBy('datetime', 'desc');

  useEffect(() => {
    colorRef.limit(3).get().then((collections)=>{
      updateState(collections);
    });
  }, []);

  const updateState = (collections) =>{
    const isCollectionEmpty = collections.size === 0;
    if(!isCollectionEmpty){
      const colors= collections.docs.map((color) => color.data()); 
      const Lastdoc = collections.docs[collections.docs.length -1];
      setListofcolors((Listofcolors)=>[...Listofcolors, ...colors]);
      setLastKey(Lastdoc);
    }else {
      setEmpty(true);
    }
    setLoading(false);
  }

  const fetchMorePosts = () =>{
    setLoading(true);
    colorRef.startAfter(lastKey).limit(3).get().then((collections)=>{
      updateState(collections);
    });
  }

  if(Listofcolors.length === 0){
    return <h1> Loading... </h1>
  }

  return (<>
    <div className="App">
      <h1> Infinite scroll in Firebase (firestore) and React.js  </h1>
      <div className="wrapper">
        {Listofcolors.map((item,index)=>( 
          <div key={index} >
            <div className="wrapper__list">
              <p><b> Title : </b> {item.title}</p>
              <p><b> Description : </b>{item.description}</p>
              <p><b> Date : </b>{item.datetime?.toDate().toLocaleDateString("en-US")}</p>
            </div>    
          </div>
        ))} 
        {isLoading && <h1> Loading... </h1>}
        {!isLoading && !isEmpty && <button onClick={() => fetchMorePosts()} className="btn__default">More Posts</button> }
        {isEmpty && <h1> There are no more data </h1>}
      </div>
    </div>
  </>)
}
export default App