Sometimes duplicate keys appear in useList after database insertion

[NathanC]

I've noticed this issue intermittently:

When a new record is added to the realtime database, it shows up multiple times in the list when using useList. When I refresh the page, it will go back to only being shown once. This has happened for multiple different views of useList (a data table, a custom component, etc), and I'm confident it's caused by a single key appearing multiple times in the data snapshot.

This has happened in two different apps of mine, a normal react project and a react native project.

I haven't been able to consistently reproduce this, but it's happened frequently enough that I bet it happens to other users. Has anyone noticed this happening to them?

(This is a very useful library by the way, thank you for creating it!)

[wong2]

+1

[rayoverweij]

I see the same, and also with useListVals.

[ByKyZo]

I have the same problem, do you have any news?

[rayoverweij]

Hi - from my experience so far, it only seems to happen in development environments, not in production.

I haven't had time to look at this repo's source code yet, but as the bug appeared after upgrading to React 18 (I think), my guess it that it has something to do with React running effects twice in development mode now, and that interfering with how RFH works.

It hasn't been a breaking issue for us as, as mentioned, it only appears in dev for me (as far as I can see, at least), but still, it's very annoying.

[achuinard]

Seeing it myself with NextJS app. Kind of concerning, makes me think the hooks don't clean themselves properly when unmounting.

[coopy]

I'm seeing this with useListVals in a multiplayer game built with create-react-app. When another client adds a player object to a list, the first client sees 5 copies of that player object. Debugging useList, these instances are kept in internal state. This is in developer mode.

React 18.2.0 react-firebase-hooks: 5.0.3

[opture]

+1

[fastsyrup]

+1

[fastsyrup]

even worse, I get triggered twice for some of the keys, first with the old v.val() and then with the old value. So I have to manually ignore the second trigger...

[GoldenSoju]

I got the same problem with useListVal in dev mode (firebase emulator). It happens after inserting entries into, or removing entries from the db. Programmatically as well as in the emulator UI view.

[bobturla]

+1 when using useListVals

[PatrikTheDev]

Also happens here when using useListVals

[hyphast]

I fixed this problem by replacing useEffect cleanup function in useList.ts file to: return () => { off(ref) };

[seth-church]

We're also seeing duplicate keys with useList. It's annoying having to check for and remove duplicates. Any ETA on this?

[akashdeep-sarin]

+1

[MB2M]

298

I added a PR to manage the issue