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.

[hood]

Any news on this?

[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.