Does Reactfire work with the current production (stable) version of React?

[arnoutaertgeerts]

Hey,

Is it possible to use Reactfire with the current production version of react? From the documentation, it is clear the intended use of Reactfire is Concurrent mode. However, it feels like the main feature that is used from Concurrent mode is the <Suspense> component for data fetching.

When going through the React documentation for Concurrent mode, I found a feature comparison of the different modes here where it shows that<Suspense> is also supported in legacy mode. When clicking on the link, it even browses towards the <Suspense> documentation for data fetching: https://reactjs.org/docs/concurrent-mode-adoption.html#feature-comparison.

Thanks for clarifying if we can only use Reactfire in Concurrent mode or if it will also work in the current production version of React.

[jhuleatt]

Thanks for the question @arnoutaertgeerts!

Current production versions of React (16.13, for example) only officially support a narrow use case of Suspense: lazy loading components. From the current React docs (May 2020):

Suspense lets components “wait” for something before rendering. Today, Suspense only supports one use case: loading components dynamically with React.lazy. In the future, it will support other use cases like data fetching.

ReactFire is currently mainly aimed at (and tested with) Concurrent mode, and using Reactfire in its default mode where it triggers suspense for all data fetches with a production build of React may cause some wonky behavior.

However, ReactFire hooks can also currently be used without triggering Suspense. For that, you'll have to import Firebase libraries on your own instead of relying on ReactFire to lazy-load them, and you'll have to pass a startWithValue to any ReactFire hook. More info here.

Since there is a lot of interest in using ReactFire without Suspense (which would allow you to confidently use ReactFire with current production React builds), we've started putting together a proposal to change the ReactFire API to make it work better without Concurrent mode. Check out PR #255 for details and updates (feedback welcome!).

[arnoutaertgeerts]

Thanks for the clear answer! From your documentation, it was quite clear that this was the case but the React docs did confuse me. The proposed solution in PR #255 looks great.

[zhigang1992]

I not sure if that is correct, we are using suspense in our app for data loading, api request and text resource loading.

And we are using prod version of React. Everything seems to be working just fine.

And I can't seems to find this quote on the docs page as well

Suspense lets components “wait” for something before rendering. Today, Suspense only supports one use case: loading components dynamically with React.lazy. In the future, it will support other use cases like data fetching.

[jhuleatt]

#255 has been merged and release candidate 3.0.0-rc.0 has been released. Run npm install reactfire@latest to try it out! This new version can be used more easily with stable builds of React.

[jamesdaniels]

Please provide any feedback here #309