Reactfire Concurrent Mode breaks Hot Reload

[frankiesardo]

Version info

React:

18.0.0-alpha-6f3fcbd6f-20210730

Firebase:

8.8.1

ReactFire:

3.0.0-rc.3

Other (e.g. Node, browser, operating system) (if applicable):

Test case

https://codesandbox.io/s/empty-sky-2flps?file=/src/App.js

Steps to reproduce

Load the page, check the Suspense is triggered as rectfire is loading the userId

Once loaded, check the UI displays a greeting with the userId

When you edit the Greetings component, 9 times out of 10 everything works as expected: you see the updated UI text and the userId stays in place.

Once every 10 times or so, you edit a component and the UI gets stuck in the Suspense state. You see "Loading.." and there's no way to get out of that state other than a hard refresh.

This behaviour happens in the codesanbox above and also in this minimal repo https://github.com/frankiesardo/reactfire-example

I have another project where it's even more common: 9 times out of 10 whenever I edit the UI the Hot Reload triggers an infinite Suspense, I cannot use the Hot Reload flow at all. I suspect it's because I have many more hooks that invoke reactfire.

Expected behavior

I can use Hot Reload and Suspense is not triggered when I am changing the UI

Actual behavior

In certain cases (randomly?) Suspense is triggered on Hot Reload and it completely breaks the development flow.

[Nachwahl]

I've the same issue here. Additionally, I have the problem that the suspense fallback is shown when a re-render of the component occurs, and the app idled for a moment before. Has someone an idea to solve this?

EDIT: Following the steps described here https://github.com/FirebaseExtended/reactfire/issues/405#issuecomment-884875074 I was able to fix the issue