Firebase as a React Hook

In a prior post, "How we use Firebase instead of React with Redux," I discussed how we created a withDbData function to load data from Firebase Realtime Database (RTDB) into React conveniently.

Now that we've switched to writing most of our components as functions, I wanted a hook equivalent for loading state. In this post, I'll explain how to use and how I implemented useDbDatum / useDbData, two hooks for generically loading data from Firebase RTDB.

Note: you can get the code as a gist here.

Usage

useDbDatum is a hook that loads a single datum at a single path in Firebase RTDB.

You could, for instance, use useDbDatum as follows:

const Name = ({uid}) => {
  let name = useDbDatum(`users/${uid}/name`)
  return <div>{name}</div>
}

Note that name is null initially, but the component rerenders with the value once it loads.

useDbData loads multiple paths at the same time, returning an object where the keys are the paths and the values are the data in Firebase RTDB.

Most of the time, you'll want to use useDbDatum over useDbData - it's more convenient and direct - but I've had to switch over once or twice in our code base.

An example for useDbData:

const SortedStudentNames = ({classUid}) => {
  let students = useDbDatum(`classes/${classUid}/students`);
  let uids = Object.keys(students || {});
  let paths = studentIds.map(id => `students/${id}/name`);
  let nameValues = useDbData(paths);
  let names = Object.values(nameValues || {});
  names.sort();
  return <p>{names.join(', ')}</p>
}

Implementation

During this implementation, I learned a lot about React hooks. I found it pretty quick to get up and running with useReducer and useEffect, but the tricky key to getting useDbData working was useRef.

useRef provides an escape hatch from the other state of functional React components, which generally trigger rerenders when updated. If you're ever yearning to replace using this.something = {} in a React class component, useRef may be your solution.

Doesn't that useRef seem hacky? I thought so too, but I discovered that I wasn't the only one who used useRef this way. Dan Abramov, one of the most famous contributors to React and author of Redux / create-react-app, also uses useRef this way. Check out his blog post "Making setInterval Declarative with React Hooks" for more.

Note: you can get the code as a gist here.

import React, { useReducer, useEffect, useRef } from 'react';
import firebase from 'firebase/app';
import equal from 'deep-equal';

function filterKeys(raw, allowed) {
  if (!raw) {
    return raw;
  }
  let s = new Set(allowed);
  return Object.keys(raw)
    .filter(key => s.has(key))
    .reduce((obj, key) => {
      obj[key] = raw[key];
      return obj;
    }, {});
}

export const useDbData = (paths) => {
  let unsubscribes = useRef({})
  let [data, dispatch] = useReducer((d, action) => {
    let {type, path, payload} = action
    switch (type) {
      case 'upsert':
        if (payload) {
          return Object.assign({}, d, {[path]: payload})
        } else {
          let newData = Object.assign({}, d)
          delete newData[path]
          return newData
        }
      default:
        throw new Error('bad type to reducer', type)
    }
  }, {})
  useEffect(() => {
    for (let path of Object.keys(paths)) {
      if (unsubscribes.current.hasOwnProperty(path)) {
        continue
      }
      let ref = firebase.database().ref(path)
      let lastVal = undefined
      let f = ref.on('value', snap => {
        let val = snap.val()
        val = paths[path] ? filterKeys(val, paths[path]) : val
        if (!equal(val, lastVal)) {
          dispatch({type: 'upsert', payload: val, path})
          lastVal = val
        }
      })
      unsubscribes.current[path] = () => ref.off('value', f)
    }
    let pathSet = new Set(Object.keys(paths))
    for (let path of Object.keys(unsubscribes.current)) {
      if (!pathSet.has(path)) {
        unsubscribes.current[path]()
        delete unsubscribes.current[path]
        dispatch({type: 'upsert', path})
      }
    }
  })
  useEffect(() => {
    return () => {
      for (let unsubscribe of Object.values(unsubscribes.current)) {
        unsubscribe()
      }
    }
  }, [])
  return data
}

export const useDbDatum = (path, allowed=null) => {
  let datum = useDbData(path ? {[path]: allowed} : {})
  if (datum[path]) {
    return datum[path]
  }
  return null
}

Conclusion

Have any thoughts or questions about useDbData/Datum? Let me know at doug@pragli.com or on Twitter @dougsafreno

Learn More about Pragli

I'm the co-founder of Pragli, a virtual office for remote teams. Teams use Pragli to communicate faster and build closeness with one another. Learn more here.

Blog

Firebase as a React Hook

Doug Safreno

Usage

Implementation

Conclusion

Learn More about Pragli

Join Our Newsletter. No Spam, Only the good stuff.

Related