search

FirebaseExtended / reactfire

Hooks, Context Providers, and Components that make it easy to interact with Firebase.
https://firebaseopensource.com/projects/firebaseextended/reactfire/
MIT License
3.51k stars 399 forks source link

data fetching hook breaks component #506

Closed cd-a closed 2 years ago

cd-a commented 2 years ago

Version info

React: 17.0.2

Firebase: 9.6.6

ReactFire: 4.2.1

Other (e.g. Node, browser, operating system) (if applicable): macOS, Firefox latest, Chrome latest

Test case

https://codesandbox.io/s/spectrum-93izg?file=/src/App.js

Steps to reproduce

Page one has no react-fire wired up, Page two does.

The first render or route render is all the same. But switching routes, the subsequent renders with react-fire break some components from displaying entirely.

render

Expected behavior

Renders as usual

Actual behavior

Second and more renders of the route with react-fire breaks some components

I know this might be related to the component library too, but I find it weird that the call to useFirestoreCollectionData would break some rendering.

cd-a commented 2 years ago

Looks like this is a strict mode issue from react-spectrum.