useUser() status is "success" on first render despite the value being undefined

Version info

Next: 12.0.7 React: 17.0.2 Firebase: ^9.6.1 ReactFire: ^4.2.1 Suspense mode: off

Test case

// FirebaseProviders.tsx

const firebaseConfig = {
  // ...
}

function FirebaseServices({ children }) {
  const app = useFirebaseApp();
  const firestore = getFirestore(app);
  const auth = getAuth(app);
  const storage = getStorage(app);

  return (
    <FirestoreProvider sdk={firestore}>
      <StorageProvider sdk={storage}>
        <AuthProvider sdk={auth}>{children}</AuthProvider>
      </StorageProvider>
    </FirestoreProvider>
  );
}

export default function FirebaseProviders({ children }) {
  return (
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <FirebaseServices>{children}</FirebaseServices>
    </FirebaseAppProvider>
  );
}

// MainMenu.tsx

export default function MainMenu() {
  const { status, data: user } = useUser();
  console.log("status", status, "user", user);
  return <div>test</div>
}

Expected Output

status loading user undefined (first render)
status success user null (2nd render)

I expect status === “loading” for the first render

Actual behavior

status success user undefined (first render)
status success user null (2nd render)

I get status === “success” for the first render despite the value still being undefined at that point

[jhuleatt]

@MatthewFallon sorry I missed your comment and PR 😞 I’ll respond in your PR

[jhuleatt]

The fix for this is available in a canary build: npm install [e-mail]1428b

Since today is Friday, I’m going to wait to publish it as 4.2.2 until Monday