Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useDocumentData returns undefined on first render until forced browser refresh returns data

See original GitHub issue
import { doc } from 'firebase/firestore';
import { createContext, useEffect, useState } from 'react';
import { auth, db } from '../firebase/firebase-config';
import {
} from 'react-firebase-hooks/firestore';
import { useAuthState } from 'react-firebase-hooks/auth';

const userAuthContext = createContext({});

const UserAuthContextProvider = ({ children }: any) => {

  const [authUser, loadingAuthUser, errorAuthUser] = useAuthState(auth);
  const [authUserDocRef, setAuthUserDocRef]: any = useState();
  const [userData, loading, error, snapshot, reload] =

  const [businessDocRef, setBusinessDocRef]: any = useState();

  const [
  ] = useDocumentData(businessDocRef);

  useEffect(() => {
    if (authUser) {
      setAuthUserDocRef(doc(db, 'users', authUser.uid));

    if (userData) {
  }, [authUser, userData]);

  return (
      value={{ authUser, businessData, loadingBusinessData }}

export { userAuthContext, UserAuthContextProvider };

businessData returns undefined. I have to manually force refresh the browser for businessData to return the correct value from Firestore.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:19 (2 by maintainers)

github_iconTop GitHub Comments

chrisbiancacommented, Nov 9, 2022

Hi everybody, apologies for the delay in investigating this properly. I’ve just given this a try and it appears that some of the changes I’ve made in the newly released v5.1.0 may have inadvertently resolved this issue.

Could I ask you to try v5.1.0 and check whether this has been fixed?

Gareecommented, Aug 6, 2022

I am also encountering this issue using React v18. I’ve switched from useDocumentDataOnce to useDocumentData as a temporary workaround.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Data becomes undefined in usequery of apollo client only ...
I am already using the conditional logic in the render, and it works on the first render, only on refresh the error occurs....
Read more >
useQuery returns undefined on first render when data ... - GitHub
I use a piece of code high up in my component tree as such: const { data: } = useQuery(GET_CART); if (!data.cart) return...
Read more >
Getting data | Firestore - Google Cloud
When you set a listener, Firestore sends your listener an initial snapshot of the data, and then another snapshot each time the document...
Read more >
first time, undefined error, but after reload, it success-Reactjs
Why I am getting this error message when I run react js project first time in my system? How to do force reload...
Read more >
SAP S/4HANA 2021
SAP S/4HANA Enterprise Management is designed for enterprises across ... ous dimension combinations to verify the data quality before.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found