Open maxprilutskiy opened 2 years ago
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?
I think I'm also seeing a double render for useUser as well 🙂
@jhuleatt Checked - nothings seems to be different. When will you guys have some time to fix this?
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
Hi,
Seems like
useFirestoreCollection
always triggers unnecessary render when fetching data (suspense is on). Similar behavior is also the case foruseUser
. 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
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
that renders only once when the data is fetched (and then only when there're changes in the collection).