[Feature]: React 18 Support

[tom-sherman]

What is the new or updated feature that you are suggesting?

Support React 18 features, perhaps this issue can be used as a tracking issue?

Why should this feature be included?

React 18 is the future...

[tom-sherman]

✅ Things I've tried so far that seem to work:

• Replacing ReactDOM.render with ReactDOM.createRoot
• useId returns an identifier that appears to be stable across client and server

[tom-sherman]

❌ Can't install the beta on npm 7 because of peer dep mismatch with @remix-run/react

Npm error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @remix-run/react@1.0.4
npm ERR! Found: react@18.0.0-beta-149b420f6-20211119
npm ERR! node_modules/react
npm ERR!   react@"18.0.0-beta-149b420f6-20211119" from the root project
npm ERR!   peer react@"18.0.0-beta-149b420f6-20211119" from react-dom@18.0.0-beta-149b420f6-20211119
npm ERR!   node_modules/react-dom
npm ERR!     react-dom@"18.0.0-beta-149b420f6-20211119" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@">=16.8" from @remix-run/react@1.0.4
npm ERR! node_modules/@remix-run/react
npm ERR!   @remix-run/react@"^1.0.4" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8" from @remix-run/react@1.0.4
npm ERR!   node_modules/@remix-run/react
npm ERR!     @remix-run/react@"^1.0.4" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[tom-sherman]

⚠️ It appeats Remix needs some tweaks on how it inserts scripts and links into the document reactwg/react-18#114 and reactwg/react-18#108

I'm not completely clear on where this work would be done, it's possible that some of these practices would need to be baked into Remix and others left up to the user to do inside of the entry module.

[tom-sherman]

❌ 🐛 I think I've found a bug.

1. Run https://github.com/tom-sherman/remix-react-18
2. Navigate to /demos/params/shh-its-a-secret

Uncaught Error: An error occurred during hydration. The server HTML was replaced with client content
    at throwOnHydrationMismatchIfConcurrentMode (react-dom.development.js:14450)
    at tryToClaimNextHydratableInstance (react-dom.development.js:14462)
    at updateHostComponent$1 (react-dom.development.js:20606)
    at beginWork (react-dom.development.js:22348)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4126)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4175)
    at invokeGuardedCallback (react-dom.development.js:4239)
    at beginWork$1 (react-dom.development.js:27123)
    at performUnitOfWork (react-dom.development.js:26288)
    at workLoopSync (react-dom.development.js:26198)

[ivosabev]

I keep getting the error references in #2564 with remix@1.4.3 it comes from the hydrate function call in entry.client.tsx.

Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

[sergiomeneses]

I keep getting the error references in #2564 with remix@1.4.3 it comes from the hydrate function call in entry.client.tsx.

Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Same here using remix@1.5.1, floowing this (https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) i get no warnings

[chaance]

Closing this as there should be no issues running React 18. Our templates do still install 17 by default, so you need to follow the upgrade guide until we decide to upgrade by default. If you have any specific problems with React 18, please open a new issue!

[megawebmaster]

@chaance the app doesn't work with hydrateRoot API (with naive change), so how should we follow the upgrade guide?

[chaance]

I upgraded to React 18 using hydrateRoot in this repro and didn't have any issues. If you have a project that doesn't work can you point it to me? I've been having a bunch of issues with Stackblitz today so anything I could run locally would be helpful. https://github.com/chaance/remix-repros/tree/main/react-18

[ivosabev]

I confirm this works:
https://github.com/chaance/remix-repros/blob/main/react-18/app/entry.client.tsx

[chaance]

There's also an unreleased update in React that should fix issues with hydrating the root document. If you install next instead of 18.1.0, this may also fix any remaining issues that may occur.

facebook/react#24523

npm i react@next react-dom@next