Repository navigation
useFirestoreCollection triggers a double render #484
Description
Activity
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
ObservableStatusobject (in your casequeryResults) 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'tostatus='success'orstatus='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
useFirestoreCollectionalways 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.logis called once.Actual behavior
console.logis 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).