A higher order component to abstract away the connection to Firebase.

Document.js

import React from 'react';
import firebase from 'firebase/app';
import { FormValidation } from '../../constants';

class Document extends React.Component {
  constructor(props) {
    super(props);
    this.db = firebase.firestore();
    this.db.settings({ timestampsInSnapshots: true });
    this.willSubscribe = this.props.path != null;
    this.state = {
      snapShot: [],
    };
  }

  componentDidMount() {
    if (this.willSubscribe) {
      this.unsubscribe = this.db // begins a subscription to this collection for live updates https://firebase.google.com/docs/firestore/query-data/listen
        .collection(this.props.path)
        .where(FormValidation.VETTED, '==', this.props.vetted) // There's a Route based mechanism to choose whether to show vetted or unvetted talks. Vetted ones only by default.
        .onSnapshot(snapShot => this.setState({ snapShot }));
    }
  }

  componentWillUnmount() {
    this.setState({ snapShot: [] });
    this.willSubscribe && this.unsubscribe(); // release the subscription to the data if it had one
  }

  render() {
    return (
      <React.Fragment>
        {this.props.children({ db: this.db, snapShot: this.state.snapShot })}
      </React.Fragment>
    );
  }
}

export default Document;