react-firebase-hooks: Sometimes duplicate keys appear in useList after database insertion
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!)
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 7
- Comments: 16 (1 by maintainers)
#298
I added a PR to manage the issue
I fixed this problem by replacing useEffect cleanup function in useList.ts file to:
return () => { off(ref) };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.
I see the same, and also with
useListVals.