• Easy realtime updates for your function components - HookslikeuseUseranduseFirestoreCollection let you easily subscribe toauth state, realtime data, and all other Firebase SDK events. Plus, they automatically unsubscribe when your component unmounts.
• Access Firebase libraries from any component - Need the Firestore SDK?useFirestore. Remote Config?useRemoteConfig.
• Safely configure Firebase libraries - Libraries like Firestore and Remote Config require settings likeenablePersistence to be set before any data fetches are made. This can be tough to support in React's world of re-renders. ReactFire gives youuseInitFirestore anduseInitRemoteConfig hooks that guarantee they're set before anything else.

# npmnpm install --save firebase reactfire# or# yarnyarn add firebase reactfire

Depending on your targeted platforms you may need to install polyfills. The most commonly needed will beglobalThis andProxy.

• Quickstart
• Common Use Cases
• API Reference
• v3 -> v4 Upgrade Guide

Check out thelive version on StackBlitz!

import React from 'react';import { render } from 'react-dom';import { doc, getFirestore } from 'firebase/firestore';import { FirebaseAppProvider, FirestoreProvider, useFirestoreDocData, useFirestore, useFirebaseApp } from 'reactfire';const firebaseConfig = {  /* Add in your config object from the Firebase console */};function BurritoTaste() {  // access the Firestore library  const burritoRef = doc(useFirestore(), 'tryreactfire', 'burrito');  // subscribe to a document for realtime updates. just one line!  const { status, data } = useFirestoreDocData(burritoRef);  // check the loading status  if (status === 'loading') {    return <p>Fetching burrito flavor...</p>;  }  return <p>The burrito is {data.yummy ? 'good' : 'bad'}!</p>;}function App() {  const firestoreInstance = getFirestore(useFirebaseApp());  return (    <FirestoreProvider sdk={firestoreInstance}>      <h1>🌯</h1>      <BurritoTaste />    </FirestoreProvider>  );}render(  <FirebaseAppProvider firebaseConfig={firebaseConfig}>    <App />  </FirebaseAppProvider>,  document.getElementById('root'));

This repository is maintained by Googlers but is not a supported Firebase product. Issues here are answered by maintainers and other community members on GitHub on a best-effort basis.

Extra Experimentalconcurrent mode features

These features are marked asextra experimental because they use experimental React features thatwill not be stable until sometime after React 18 is released.

• Loading states handled by<Suspense> - ReactFire's hooks throw promisesthat Suspense can catch. Let Reacthandle loading states for you.
• Automatically instrument yourSuspense load times - Need to automatically instrument yourSuspense load times withRUM? Use<SuspenseWithPerf />.

Enable concurrent mode features by following theconcurrent mode setup guide and then setting thesuspense prop inFirebaseAppProvider:

<FirebaseAppProvider firebaseConfig={firebaseConfig} suspense={true}>

See concurrent mode code samples inexample/withSuspense