Unexpected re-renders during collection fetch
brumm opened this issue · comments
Hey,
Thanks for making this!
I noticed that my app was re-rendering many times on initial load, and after changing a document, which was being rendered by a FirestoreCollection
.
You can observe the behavior like this:
<FirestoreCollection path="bookmarks">
{({ isLoading, value }) => {
if (isLoading) {
return <Loading />
} else {
console.log(value.length)
return null
}
}}
</FirestoreCollection>
Assuming you have a couple of documents in bookmarks/
it should count up to the length of the collection.
It seems this happens because setState
is being called for each document in the collection here and each setState triggers a re-render.
Is this by design? The current behavior was unexpected for me, as I assumed it would only re-render once and add the documents in one transaction.
Hey @brumm,
Thanks for reporting this and investigating it 👍
I think you're right it should do it in one transaction instead of one for each document.
If you have time, a PR would be very much appreciated !
Otherwise, I will look at this as soon as I have the time to.
Cheers !
Can you try 0.4.0 and let me know if it's acting as you expect ?
Cheers :)
Hey,
Sorry, I was meaning to create a PR a couple of days ago but life got in the way.
The changes are looking good! Can confirm that it adds all documents in one transaction. Thanks!
Hey,
I am still experiencing this behavior when I have a where clause in my statement
I'm using v0.5.4
<FirestoreCollection path="/users" where={{ field: 'userId', operator: '==', value: id }}>
{data => {
console.log(data)
}}
</FirestoreCollection>
Hey,
I am still experiencing this behavior when I have a where clause in my statement
I'm using v0.5.4<FirestoreCollection path="/users" where={{ field: 'userId', operator: '==', value: id }}> {data => { console.log(data) }} </FirestoreCollection>
same issue here, this is spamming so much that the event loop is getting blocked up and my 500ms time outs are taking 5-10 seconds.