rakannimer / react-firebase

🔥Declarative React bindings for Firebase Auth & Realtime Database.

Home Page:https://react-firebase-js.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.