Partial list of React 18 compatible library releases

[acdlite]

Let's use this discussion to track libraries that are known to be compatible with React 18, or have published a React 18-compatible prerelease.

This is not an exhaustive list. Please let us know if you'd like to add your library here.

Metaframeworks

Next.js

The latest release of Next.js supports opt-in support for React 18 and concurrent features: https://nextjs.org/docs/advanced-features/react-18

Gatsby

Gatsby supports React 18 and concurrent features starting with v3.7. https://www.gatsbyjs.com/blog/how-to-try-react-18-in-gatsby/

Data frameworks

Relay

Suspense was developed in close cooperation with the Relay team, so Relay has full support for React 18 and concurrent features, including Suspense transitions. https://relay.dev/docs/guided-tour/rendering/loading-states/

We're working with other projects to take what we learned with Relay and bring it to the rest of the React ecosystem.

Apollo

Apollo Client 3.6 will support React 18. Internally, it uses the new useSyncExternalStore API to ensure compatibility with concurrent features.

Beta releases of 3.6 are published using the @beta tag.

State management

React Redux

React Redux v8 will support React 18. Internally, it uses the new useSyncExternalStore API to ensure compatibility with concurrent features.

Alpha releases of v8 are published using the @next tag.

zustand

Zustand v4 will support React 18. Internally, it uses the new useSyncExternalStore API to ensure compatibility with concurrent features.

Beta releases of v4 are published using the @next tag.

https://www.npmjs.com/package/zustand/v/4.0.0-beta.0

Testing

React Testing Library

React Testing Library v13 will support React 18. It will automatically switch your tests to createRoot, so many existing tests won't need to be upgraded.

Alpha releases of v13 are published using the @alpha tag.

[bluebill1049]

hi, @acdlite is there any good measurement to ensure compatibility? eg when those new API is not yet used.

[markerikson]

FWIW, I think it's fair to shorthand any data storage that is not useState/useReducer/this.setState as "outside of React".

[bluebill1049]

thanks @markerikson 👍

[acdlite]

We will be publishing more in-depth guides for library compatibility as part of our documentation effort before the release.

The high level takeaway is:

• All existing libraries should "just work" with React 18, with some minor edge cases related to automatic batching.
• For compatibility with concurrent features like startTransition, you might need to do some additional work, like adopting useSyncExternalStore.

I know the current resources are not as helpful as they need to be. We will make this much better before the final release.

Thanks for your patience while we continue working on it!

[gaearon]

Note that useSyncExternalStore applies to things you read during rendering. If you hold some data "outside" of React and, for example, only ever read it during event handlers, then there is no need for React to know or care about it. That data can stay exactly as is.

[bluebill1049]

Note that useSyncExternalStore applies to things you read during rendering. If you hold some data "outside" of React and, for example, only ever read it during event handlers, then there is no need for React to know or care about it. That data can stay exactly as is.

Thanks, @gaearon and @acdlite. That's a very good point! As for react-hook-form, it cares about setting up an initial inputs value (controlled) or default value (uncontrolled) after each input gets mounted, and updating form values with user's interaction gets report back to hook form for submission. For form state update (isDirty, touchedFields and etc) are currently hosted inside a single useState for a similar effect as batch effect, which we will break into individual state update as react 18 will batch for us and useEffect will work much nice for individual formState update. I will do some further investigation into whether useSyncExternalStore is applicable for react hook form. So far, I have a feeling that react hook form should just work for react 18.

[markerikson]

Related note: as of React-Redux v8.0.0-alpha.1, I had updated it to only use the built-in useSyncExternalStore version, thus forcing use of React 18.

After a suggestion today, I'm going to try implementing a 'react-redux/compat' entry point that would use the shim, thus enabling compat with React 16.9+ and Preact:

reduxjs/react-redux#1740 (comment)

[markerikson]

Update: I've just published https://github.com/reduxjs/react-redux/releases/tag/v8.0.0-beta.0 , which adds that 'react-redux/compat' entry point that falls back to the shim. I also went ahead and upgraded the version to "beta", on the grounds that it seems stable and it matches the React version here.

[dai-shi]

Hi! zustand@next is published. It's implemented with use-sync-external-store.
https://www.npmjs.com/package/zustand/v/4.0.0-beta.0

[acdlite]

Yay! Added!

[hwillson]

Hi all! @apollo/client@beta is React 18 ready (using the useSyncExternalStore API):

Apollo Client 3.6 will support React 18. Internally, it uses the new useSyncExternalStore API to ensure compatibility with concurrent features.

Beta releases of 3.6 are published using the @beta tag.

Thanks!

[acdlite]

Awesome, just added! Thank you!

[eps1lon]

MUI Core v5¹ should be compatible if used with Emotion. Streaming rendering is currently untested and we don't know yet how this would look with Emotion. For MUI X² we don't have strong guarantess but encourage experimentation and appreciate any issue filed against https://github.com/mui-org/material-ui-x.

Note that @mui/styles is considered legacy and will not have support for React 18.

¹ Includes the following packages

• @mui/material
• @mui/lab
• @mui/icons-material
  ² Includes any package starting with @mui/x-

[Andarist]

We had a meeting with Mitchell last week or so to discuss the streaming rendering story for Emotion. I think we roughly have figured the plan out - but we still need to get to actually implementing it and seeing if we end up with any unforeseen problems.

[StephenHaney]

Radix primitives should now be compat with React 18 streaming. We moved all our state into React APIs and made good use of the useId hook. We've tested in a streaming environment and haven't seen any issues.

Audits and bug reports very welcome -> https://github.com/radix-ui/primitives/issues

[kitten]

We just published a new urql release (2.1.0/1) that switches over to useSyncExternalStore. While our tests seemed to indicate that with our previous support of Concurrent and Suspense nothing broke, this should further help in hopefully giving y'all more peace of mind in terms of adhering to a shared contract 😄✌️

[acdlite]

Is there a reason you still need to maintain your own subscription implementation here? https://github.com/FormidableLabs/urql/blob/main/packages/react-urql/src/hooks/useSubscription.ts