React 18 Support

[alex-statsig]

Seems like strict mode is broken with react 18, but with that disabled generally works (so I'd guess off-screen API would break), would just need to add 18 to the package.json

[zdavis]

In a few of our Next.js apps, it's looking like relay-hooks isn't compatible with React v18. We're finding that the useQuery hook never finishes loading under v18 even though we can see that the XHR request has completed. If we rollback React to v17, the useQuery hook works as expected. I'll see if I can try to put together a simple reproduce case, but wanted to just record this experience here in case it's helpful.

[morrys]

I'll see if I can try to put together a simple reproduce case

@zdavis this would be really useful 👍

[zdavis]

Here you go: https://github.com/zdavis/relay-hooks-issue

It's a vanilla create react app with a basic Relay setup that you can start with yarn start or npm start. The src/App.js component fires off an unauthenticated request to the public SpaceX GraphQL API and the component renders the value of isLoading. You should be able to see the XHR request complete, but isLoading never changes to true.

Hope this helps! Let me know if there's anything else I can do to help resolve this. Thanks so much!

[morrys]

Hi @zdavis the problem is that React 18 renders components twice in development mode
facebook/react#24425

In fact, in your project if you try to perform yarn build and then start the application (serve -s build) you will see that the problem does not occur.

[zdavis]

That makes sense. Do you think the problem can be mitigated in react-hooks, or do you think the fix is outside of the scope of this library?

[morrys]

For the moment, I consider it out of scope because the problem does not exist in production and the component correctly disposes of all its listeners.
Furthermore, all tests, most of which are original from the relay repository, are performed successfully.

I leave the issue open as a reminder.

[alex-statsig]

For the moment, I consider it out of scope because the problem does not exist in production and the component correctly disposes of all its listeners. Furthermore, all tests, most of which are original from the relay repository, are performed successfully.

I leave the issue open as a reminder.

Yeah it's a bit annoying as I had to disable strict mode to avoid that issue in development. Agreed that it hasn't seemed to cause issues in production, but I suppose one day would with Offscreen APIs