Follow along with the implementation in PR #369

What's happening?

Firebase v9 introduces a new API that is more tree-shakeable! This should result in huge improvements in bundle size! See the full "why" here, and more info in the Firebase docs.

ReactFire needs an internal re-write to support this new SDK, but most of its API will stay the same. The main API difference will be how you initialize individual Firebase SDKs.

A Context Provider for every Firebase product

ReactFire's SDK hooks (useAuth(), useFirestore(), etc) used to find a Firebase product SDK from the root Firebase app that was set up in FirebaseAppProvider. Going forward, you'll supply the SDK through individual providers (like AuthProvider, FirestoreProvider).

As long as you're in a component that's a child of that provider, you'll be able to use all the ReactFire hooks just like you did before. If you call a ReactFire hook that isn't in its provider, it will throw an error.

Example

In an app that uses Auth and Realtime Database, you'll need to initialize those SDKs and pass them to AuthProvider and DatabaseProvider:

import { getAuth } from "firebase/auth"; // Firebase v9
import { getDatabase } from "firebase/database"; // Firebase v9

import {
  FirebaseAppProvider,
  DatabaseProvider, //  this is new!
  AuthProvider, // this is new!
  useFirebaseApp,
} from "reactfire";

function FirebaseComponents({ children }) {
  const app = useFirebaseApp();

  // initialize Database and Auth with these new Firebase SDK functions
  const database = getDatabase(app);
  const auth = getAuth(app);

  // any children will be able to use `useUser`, `useDatabaseObjectData`, etc as normal
  return (
    <AuthProvider sdk={auth}>
      <DatabaseProvider sdk={database}>{children}</DatabaseProvider>
    </AuthProvider>
  );
}

More sample code is available in the "Using ReactFire" guide and in the "example" folder.

Why not just use the new getDatabase, getAuth functions directly?

We considered this, which would look something like:

const app = useFirebaseApp();
const auth = getAuth(app); // the native Firebase `getAuth` function

// just for demonstration, this isn't the actual API!
const { status, data: user } = useUser(auth);

However, some Firebase product SDKs, especially Firestore, have special settings functions that must be called before any other functions are called (example). This can be tricky to enforce in a React app, but by being a child of a Provider that you know was passed a fully initialized SDK (with all settings set), you can guarantee you aren't calling that SDK too early.

Try it out

Try it out quickly on StackBlitz: https://stackblitz.com/fork/reactfire-v4-sample

Or, you can install the latest ReactFire canary (based on the most recent commit to #369) by running

yarn add firebase@beta reactfire@exp

The latest docs can be found here.

Feedback welcome!

Please comment below with any feedback, questions, concerns.