Firebase — Firestore Database Realtime Updates with React Hooks — useEffect

Kitson Broadhurst
Feb 3 · 3 min read

I followed a great tutorial from Robin Wieruch to setup Firebase with your React app.

This tutorial setup user auth and created a withFirebase Higher Order Component (HOC), providing the Firebase config and initialisation.

The only issue is that everything in the tutorial is written with classes (written in 2018) and I wanted to try to setup the subscription with Hooks!

Image for post
Image for post
https://unsplash.com/photos/UKX_DwNKXSA

Subscribe to updates with useEffect

Traditionally, subscribing to realtime updates would be done with componentDidMount() and unsubscribing in componentWillUnmount().

With React’s useEffect hook we can setup a subscription to our Firebase Firestore database and cleanup with a call to unsubscribe.

We declare a constant called unsubscribe, which calls the firebase prop, subscribing to updates using onSnapshot().

The return call within useEffect handles the cleanup. Here we call unsubscribe() which is ran when the component unmounts.

The last thing we do is to optimise the hook by only re-running when [props.firebase] change. It is also possible to use an empty array [] to only run once when the component first mounts.

Handle returned data

If our Firebase Firestore collection has documents then snapshot.size will equate to true.

Here we can handle the returned result.

For example, we can declare an array variable, loop through the snapshot, push the data to the array and store the new data array in state:

Else…

If the snapshot.size equates to false, something went wrong with the fetch.

This could just be that the collection is empty.

Handle loading

For this component I want to show a loading spinner until I get a result back from Firestore.

To do this, store the loading variable in state and initialise it as true — we’re loading until the Firestore tells us otherwise.

const [loading, setLoading] = useState(true)

Inside of our component we can test the loading state, displaying a <Loader /> or null:

{ loading ? <Loader /> : null }

Inside our useEffect method we can set loading to false when we get a response from Firebase:

If the snapshot returns something OR nothing, either way we’ve finished loading, so we set this using the setLoading hook.

…and that’s it!

For now, the Firebase HOC is a good setup and isn’t something I feel the need to re-write with Hooks.

Reference Links

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store