Hello Everyone, This article is about how to pagination with firebase cloud Firestore in your React project. The firestore fetch first 3 data for example, then fetch the last data store the key value to execute a new query to fetch next 3 data starting after last fetched data. Scroll down to the page, so you can see the demo and full source code available for this.

How to set up a React App to Firebase hosting for free

React Firebase Firestore CRUD Operations

React Firebase storage Upload and save url to firestore

Install and Create React App

First, we’ll create a new React application using the following command in the terminal window:

npx create-react-app foldername
cd foldername 

Install Firebase package in React

npm install --save firebase
npm start 

This command run our project, a new browser tab will automatically open on our computer's default browser that points to "http://localhost:3000".

Next, Project structure your folder as follows.

├── App.css
├── App.js
├── firebase-config.js
├── index.css
└── index.js 

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

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.

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

Related keywords

  • Firestore Pagination with Realtime Updates
  • Implementing Infinite Scroll (Lazy Loading)
  • Implementing Infinite Scrolling with Firebase?
  • Infinite Scrolling In Firebase
  • Firestore pagination
  • React Firebase pagination
  • Firestore Infinite Scroll pagination
  • React Firebase Infinite Scroll pagination