import { Message } from "theme-ui" This quick guide shows you how to fetch data from Cloud Firestore. Assuming you already have a collection with a list of documents. Note: This guide will use Web version 9 (modular) - which is the latest version. # What we are going to do in this tutorial: - Understand how Event Sourcing & Event Streams work. - Understand how Snapshots work. - Create a React custom hook which listens to events from Firestore Database. - Render our data in our component. If you don't have a project set up yet on Firebase, I have this [quick guide](/blog/initial-setup-for-cloud-firestore-database/) to help you set it up. > 💡 Once we've initialized our Firestore database, we will need it here. # Event Sourcing & Streams In Event Sourcing, you'll typically replay all the events from the beginning of time from an Event Stream to get to the **current state** of your aggregate. In most occasions, you'll have a **lifecycle** to the stream that will eventually end but you could also have a stream that is never ending, something like products in a warehouse. The problem is what if we have thousands or millions of events that need to be replayed? This will create a very inefficient, time-consuming and slow process 😐 . This is where Snapshots come in. # Snapshots A snapshot is a representation of state for your aggregate at a particular point in time or event. To [get realtime updates](https://firebase.google.com/docs/firestore/query-data/listen) with our Cloud Firestore database, we will need an **onSnapshot()** method which listens to a document. When you provide a callback in the initial call, it creates a document snapshot immediately with the current contents of the single document. Then, each time the contents change, another call updates the document snapshot. To listen to multiple documents in a collection, this method will listen to the results of a query which then creates a query snapshot. # React Custom Hook In order fetch and render the most updated data from our Firestore Database onto our UI, we will need to create a custom hook. This hook's job is to listen to events from our database, record the state of the aggregate and store the state. By using **onSnapshot()** method, it attaches a listener for **QuerySnapshot** events in our Firebase. Note that although streams are never ending, this listener can be cancelled by calling the function that is returned when **onShapshot()** is called. ## Explanation We will store the snapshot in an array using the **useState hook**. To be able to detect changes, we will use the **useEffect hook** with our collection as dependency so that every document change in our collection gets hooked and stored in our state. The job of **collection()** method here is to get the **CollectionReference** instance that refers to the collection at the specified absolute path and returns the **CollectionReference** instance. ## Code Create a folder **"hooks"** inside src and create a file **"useFirestore.js"**: ```jsx mkdir root/src/hooks touch root/src/hooks/useFirestore.js ``` Stick this code in it: ```jsx import { useEffect, useState } from "react" // import the React hooks import { onSnapshot, collection } from "firebase/firestore" // import the methods from firestore import { firestoreDb } from "../config/firebase" // The reference to our Firestore database after we've initialized it. export const useFirestore = col => { const [docs, setDocs] = useState([]) useEffect( () => onSnapshot(collection(firestoreDb, col), snapshot => setDocs(snapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }))) ), [col] ) return { docs } } ``` # Render your data Create a file "**Products.js**" inside **src/components**. ```jsx touch src/components/Products.js ``` Then, copy this code in it: ```jsx import { useFirestore } from "../hooks/useFirestore" // Our hook we just created const Products = () => { const { docs } = useFirestore("your-collection-name") // Our hook takes in the collectionName as parameter" return (

// ... add your own styling here

{index + 1}

{product.Name}
// Grab the keys from your document fields
{product.Description}

${product.Price}

) } export default Products ``` Lets go ahead and run the app: ```jsx npm run dev ``` Voila! We can now fetch our data from Cloud Firestore database. 👏 While there is another option to fetch data from Firebase (like [react-firebase-hooks](https://www.npmjs.com/package/react-firebase-hooks)), I chose to create my own customized hook that is understandable to me and works for me. If you are interested to learn more on how to sort & update the data from Firestore or how to store & delete images from Firebase Storage, check out my other blog posts. Good luck!

{product.Name}

latest posts

How I Revamped My Blog — 2025 App Router Edition

My Favorite Tech Podcasts

Handling External Links for MDX files in Gatsby

Image types: Vector vs. Pixel

Initial setup for Cloud Firestore database