Getting data from the collection() query with `useFirestoreConnect` after getting particular doc() causes multiple renders

[alekseykarpenko]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When I'm using useFirestoreConnect to get the data from collection, that was previously provided to store user profiles (as userProfile option), I'm facing a very strange behavior, that seems like a bug. My component is being continuously updated, adding one new element to collection state after each iteration, while isLoaded is true from the very beginning.

Here is the code:

export const Authors: React.FC<Props> = (props) => {
  useFirestoreConnect(
    [{
      collection: 'users',
      storeAs: "authors"
    }]
  )

  const users = useSelector((state:AppState) => state.firestore.ordered.authors)

  console.log(users, isLoaded(users));

  return (
    <div>

    </div>
  );
};

And here is console output:

What is the expected behavior? If I change collection to any other, that is not related to user profile, I meet the expected behavior:

UPDATE: If I remove profile definition from config, the same code also works as expected, so it's definitely a bug related to profile and useFirestoreConnect:

const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true
}

UPDATE 2: I see a bunch of DOCUMENT_ADDED actions in my Redux console., so it's thinking that i'm adding those documents into my collection at the same time while i'm actually requesting them:

UPDATE 3 I have found, that this bug is not related to profiles only, but to any situation, when you first connect the particular doc, and then query all the collection. See my comment.

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?

{
    "firebase": "^7.13.1",
    "react": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-redux-firebase": "^3.3.0",
    "redux": "^4.0.5",
    "redux-firestore": "^0.13.0",
}

[prescottprue]

Make sure you are passing an array of query configs to useFirestoreConnect instead of a single object. We should have something in place to throw an error in this case, thanks for reaching out

[alekseykarpenko]

@prescottprue Thanks for your quick response! I've changed the parameter, but the behavior left almost unchanged. Values are adding one by one.

[alekseykarpenko]

@prescottprue This strange behavior changes only if request another collection, that was not previously used as userProfile

[alekseykarpenko]

UPD: If I remove this from config, the same code will work as expected, so it's definitely a bug related to profile and useFirestoreConnect:

const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true
}

[alekseykarpenko]

UPD 2: I see a bunch of DOCUMENT_ADDED actions in my Redux console, so it's like i'm adding those documents into my collection while i'm actually only requesting them from the Firestore:

@prescottprue Could this bug be related to redux-firestore?

[alekseykarpenko]

@prescottprue Could you please take a look on this bug? This is kind of blocker for me, as I was trying to implement some internal functionality with user profiles.

[alekseykarpenko]

@prescottprue Any thoughts on this?

[NiliusJulius]

I see the same thing happening. At the moment you cannot use user profiles and retrieve the users collection without this issue occurring.

[alekseykarpenko]

@prescottprue I have found, that this bug is not related to profiles only, but to any situation, when you first connect the particular doc, and then query all the collection:

useFirestoreConnect([
  {
    collection: 'series',
    where: [
      ['default', '==', true],
      ['active', '==', true]
    ],
    limit: 1,
    storeAs: "defaultSeries"
  },
  {
    collection: 'series',
    where: [
      ['organizer.id', '==', organizerId]
    ],
    storeAs: "series-by-organizer"
  }
]

the second query in that case will trigger multiple DOCUMENT_ADDED events and rerender the Component after each update. This seems to me as very serious bug, you definitely should look on it.

[rbutov]

I found the same wrong behavioral. When I'm trying to get list of docs in child component and parent doc is getting docs from the same collection I see multiple "@@reduxFirestore/DOCUMENT_ADDED" actions.

[prescottprue]

@alekseykarpenko Agreed that it is a big issue - It seems to be because of how Firebase's SDK is returning that data if it already has been loaded by the SDK in another listener.

As seen here docChanges is being used to dispatch changes to documents if they exist and the updates size is less than the full query size. This was originally to handle updates which are triggered on only a single document or sub-group of documents instead of the whole list of docs.

There is a TODO there to make this optional, but wondering if that would cause any issues when only a single doc is changed.

[rajivsubra1981]

@alekseykarpenko and others - Thanks for catching this, it does hurt first-load performance. Any workarounds?

[rusakovic]

Confirm this issue. Also isLoaded is not working correctly. Always shows true, if you reapply where query for useFirestoreConnect "react-redux-firebase": "^3.7.0",

[barthicus]

I also faced this problem. First load almost freezes the browser. Is there any temporary fix/hack? 🥺

[mike-lvov]

Hopefully, https://github.com/prescottprue/redux-firestore/pull/319 will fix this, when merged in

[potier97]

@mike-lvov, cuándo van a fusionar la rama para solucionar el problema? gracias

[0xdevalias]

@potier97 I believe @mike-lvov is just an external person who wrote a PR to attempt to fix this issue. The timing of if/when this gets accepted/merged into the project/released is entirely up to @prescottprue (or another direct 'contributor' to this project, if there are any)

[mike-lvov]

@potier97 one way to handle it is to use my branch as a dependency in your package.json, but all the risks of doing it this way are on you.

[TrySpace]

For me this issue only arises when I come from a compontent/route that has queried a document id on the same collection, e.g. postsById, and then go to a list that queries postsById, it will trigger all the dreaded DOCUMENT_ADDED like the console output in the original question.

It seems it's trying to be clever and 'smoothly' add the newly added documents, but I don't see any case where this will not impact performance. It happens generally (depending on latency) in the first few ms, so any transition animation will happen then, and gets interrupted. Setting a delay for render also does not help, because there is no control over when these documents are added.

But this does look promising: https://github.com/prescottprue/redux-firestore/pull/319

[prescottprue]

Would love to getting the mentioned PR merged, but the tests are currently failing. Looks like it shouldn't be a breaking change since it is a new action type, but might be based on how the reducer is updating state

Currently extremely busy, but if someone has a chance to look at the tests please reach out with your findings. I'll do the same when I get the chance to look at it

[ntns55]

Is there any update on this? I have a project that is collapsing because the list of users is loaded in 1 by 1 for the admins.

Edit: I have found a workaround. As the userProfile was trying to load from the same collection as the list of all users, this was causing this issue. As such I have removed userProfile and it now works smoothly.