useFirestoreCollection triggers a double render

[maxprilutskiy]

Hi,

Seems like useFirestoreCollection always triggers unnecessary render when fetching data (suspense is on). Similar behavior is also the case for useUser.
There's a chance I'm simply using the API wrong, so please advise if so :)

Version info

React: 17.0.2

Firebase: 9.1.3

ReactFire: 4.2.0

Test case

  const q = /* whatever query */;
  const queryResults = useFirestoreCollection(q);
  console.log(queryResults);

Expected behavior

console.log is called once.

Actual behavior

console.log is called twice.

Ultimately, what I'm trying to achieve is a code similar to the one below

const queryResults = useFirestoreCollection(query);
return queryResults.data.docs.map((d) => /* render */);

that renders only once when the data is fetched (and then only when there're changes in the collection).

[jhuleatt]

Hi @maxprilutskiy, my first thought is that this might be Firestore first returning locally cached data, and then later returning data from the server. Does queryResults.data.metadata.fromCache (docs) flip from false to true between the first and second renders?

Also, just to check, does anything else in the ObservableStatus object (in your case queryResults) change between renders?

[matt-kinton]

I think I'm also seeing a double render for useUser as well 🙂

[maxprilutskiy]

@jhuleatt Checked - nothings seems to be different. When will you guys have some time to fix this?

[ralrom]

You're getting multiple renders because Reactfire updates the status, it goes from status='loading' to status='success' or status='error'

The way I handle this is by checking the status:

const {status, data} = useFirestoreCollection(query);

if(status === 'loading') {
   return "Loading..."
}

// Render component