useCollectionOnce | useDocumentOnce infinite loading

[Samuele1818]

I'm using these hooks to load data from firestore, and everything is working properly when I use useDocument or useCollection, but when I try to replace these methods with useDocumentOnce or useCollectionOnce I got an infinite loading.

useCollectionOnce:

const [data, isLoading, isError] = useCollectionOnce( //Infinite loading
   query(
     collection(
       getFirestore(),
       'examplePath'
    ),
     orderBy('test'),
     limit(2)
    ),
    {
       getOptions: {
          source: 'server'
       }
   }
 )

 useEffect(() => {
   console.debug(isLoading) // Output always true
 }, [isLoading])

useCollection:

 const [data, isLoading, isError] = useCollection( //Working Properly
   query(
     collection(
       getFirestore(),
       'examplePath'
    ),
     orderBy('test'),
     limit(2)
    ),
   }
 )

 useEffect(() => {
   console.debug(isLoading) // Output false after data is retrived
 }, [isLoading])

NOTE If a hot reload is triggered, useCollectionOnce loads the data.

[Niels van der Veer]

I had the same issue, turns out that removing <StrictMode> was the solution. Maybe it is related to the fact that effects are executed twice if <StrictMode> is enabled. See also #231

[Miguel Arduz]

@n9iels
I saw that behaviour as well, but would it be smart to remove the Strictmode ? It is there to help us with React errors, so it would probably better to fix the problem at its root

[Kyle Scott W.]

Incase anyone is facing this issue, you need to make sure you memoize your props in the query..

Correct

const timeStampUtcStartOfDay = useMemo(() => {
    const startOfDay = new Date()

    return Timestamp.fromDate(startOfDay)
  }, [])

  const queryRef = query(
    collection(db, 'event'),
    where('dateTime', '>=', timeStampUtcStartOfDay),
    limit(1)
  )

Issue

  const queryRef = query(
    collection(db, 'event'),
    where('dateTime', '>=', Timestamp.now()),
    limit(1)
  )