Compatibility with React 18?

[Nemmcy]

Components are not compatible with React 18 as it can be seen in package-lock.json:

"peerDependencies": {
    "react": "^16.8.0 || 17.x",
    "react-dom": "^16.8.0 || 17.x"
}

Eslint throws warnings, but shows 0 vulnerabilities and I haven't had any issue yet.

Is it safe to use Reach UI with React 18? When will you update the libraries? Thank you in advance!

[johnnyluu]

I'm finding that Listbox doesn't work (no response after clicking on the trigger) in my new project using React 18, but the same setup works in React 17.

[chaance]

I don't support React 18 just yet. There are a number of things that won't play well with concurrent rendering or the new StrictMode behavior. I'm going to start going through all of that this weekend and take stock of what all needs to be done to get there.

[tajo]

It would be nice to just relax the peerDeps versions of React first. It seems to be mostly working but some package managers like pnpm are more strict and just error out if there's peerDeps mismatch.

[trumbitta]

@chaance

1. I ❤️ you because Reach UI is just fantastic
2. Any chance for a status update on R18 support? 🤞

[Hypnosphi]

It would be nice to just relax the peerDeps versions of React first

I agree. Basically when you don't include some version in peer dependencies you say "don't even try using it with that version".

some package managers like pnpm are more strict and just error out if there's peerDeps mismatch

This is also the default behavior in NPM 8, which comes with the current Node LTS

[jeanpan]

I don't support React 18 just yet. There are a number of things that won't play well with concurrent rendering or the new StrictMode behavior. I'm going to start going through all of that this weekend and take stock of what all needs to be done to get there.

@chaance, would you mind to share what all needs to be done to support React 18 here?

[chaance]

@jeanpan Main thing is checking everything out in StrictMode now that React double executes effects, which will likely spot a few bugs we need to fix. In a few places we are tracking renders in the effect (eg, usePrevious), and that's gonna be a problem. Another thing is to ensure that we aren't improperly accessing refs during render to prevent concurrent rendering bugs.

There may be some other things, but running the test suite w/ React 18 and checking the storybook examples would be a good way to find out for sure.

[brennarvo]

I tried running the new test:react-18 script inside the repo to see if the tests pass with React 18, but was getting path resolution errors: #941 (comment)

[chaance]

test:react-16 and test:react-18 haven't been properly set up yet. I'll respond here when I have everything working.

[Nemmcy]

4 months have passed since the issue was opened and, among the 30 dependencies in my project, @reach/dialog is the only one that is not compatible with react 18.x.x. When will you release the new version approximately?

I would love to help, but I definitely don't have the expertise for that. Thank you for all the amazing work!

[chaance]

Please keep in mind that this is a free and open source project, free for you to use, fork, or abandon if it no longer works for you. It is maintained very sparingly at the moment, whenever I have the time. There are no updates at the moment, so do with that what you will.

The best way to move the needle on this issue is by helping me out with tasks noted above. If you don't have the expertise to jump into the actual code, organizational work (breaking down tasks, managing progress, etc.) is also very helpful. This is a great opportunity to invest in a project you rely on, which is the only way [unfunded] open source work can be sustainable.

(Alternatively, I am available for limited contract work if you want to pay me 😄)

Here is a table of all packages I can use to keep track of what needs to be done. Because we don't have as much test coverage as I'd like, new tests would be appreciated. We'll still need manual testing (particularly around keyboard navigation in packages that rely on descendants as I'm not entirely confident in that package working smoothly in R18). These should all be tested against what's on the dev branch, not the latest release.

Reach Package	React 16		React 17		React 18
	Manually tested in Strict Mode	Tests Pass in Strict Mode	Manually tested in Strict Mode	Tests Pass in Strict Mode	Manually tested in Strict Mode	Tests Pass in Strict Mode
accordion
alert
alert-dialog
auto-id
checkbox
descendants
dialog
disclosure
dropdown
listbox
machine
menu-button
popover
portal
rect
skip-nav	✅	✅	✅	✅	✅	✅
slider
tabs
tooltip
utils
visually-hidden	✅	✅	✅	✅	✅	✅
window-size

For those who want to help with debugging and development

I suggest starting with the lower-level packages that all other packages depend on. Identifying and fixing issues in packages like utils, popover, portal and descendants will make life much easier on the packages intended for end-user consumption.

[dartess]

test:react-16 and test:react-18 haven't been properly set up yet. I'll respond here when I have everything working.

@chaance It looks like I've set it up #959

[dartess]

Identifying and fixing issues in packages like utils, popover, portal and descendants

I'm start check utils and write tests in #960

[luissolanodev]

Hey sorry I'm curious, to do all these tests and say that they pass in React 18 what are the changes required? Having React 18 installed as a dependency, change render to createRoot and perform the tests?

[ahmedyounes]

tested portal in my app React 18
Warning: Expected server HTML to contain a matching in

.

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

[Jeff-hive9]

We are looking at moving to React 18 - Does reach-ui support react 18 now ? Appears to be no doco saying so.

[kturmel]

We are looking at moving to React 18 - Does reach-ui support react 18 now ? Appears to be no doco saying so.

We are using it without any problem in a nextjs app.

[atulmy]

Works when

"@types/react": "18.0.29",
"@types/react-dom": "18.0.11"

[HuyAms]

I plan to migrate to React v18. However, the peerDependencies: "react": "^16.8.0 || 17.x", prevents me from doing that. Any walkaround?

[harsimranb]

It would be really nice to have React v18 setup for this repo. Projects dependent on this library are blocked on upgrading, or having to fork and update.

[kentcdodds]

Jumping in here to mention that when trying with React 19 there are runtime warnings now as well 😭

Warning: Invalid prop `ref` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.
    at Menu (/Users/kentcdodds/code/kentcdodds.com/node_modules/@reach/menu-button/src/reach-menu-button.tsx:42:9)