Installing React 18 RC

[caabernathy]

Installing React 18

To install the latest React 18 RC, use the @rc tag:

npm install react@rc react-dom@rc

We don't have a specific release dates scheduled, but our expected timeline is:

• React 18 Library Alpha (Complete)
• React 18 Public Beta (Complete)
• React 18 RC (Available now)
• React 18 (~2-4 weeks after RC)

Alpha (complete!)

This is the initial preview of React 18. We believe most of the features are stable, however, there is still some work to be done including finalizing new APIs such as useMutableSource, useOpaqueIdentifier, and stylesheets. We’ll iterate on these features with the working group and collect feedback in order to finalize them.

We’ll also be working with popular libraries in the ecosystem to ensure that they have the support they need for React 18.

During the alpha stage, we only expect library maintainers and working group members to try the release to provide direction and feedback.

Beta (complete!)

Once we are feature complete, we’ll release the React 18 Beta. This will have all of the breaking changes and new features that will make it to the final release, but may still have bugs that we haven’t uncovered.

During the beta phase, we’ll invite the larger community to begin trying React 18 to provide feedback and catch any remaining issues.

RC (current stage)

Once we’re fully feature complete and feel confident in the stability of the Release, we’ll cut an RC. At this point, we will feel comfortable with releasing the stable and for users to being testing in production.

Stable

Finally, we’ll have the stable React 18 release!

Release tags

When the tags are available, they will be have the following format:

• react@alpha: 18.0.0-alpha-<sha>-<date>
• react@beta: 18.0.0-beta-<sha>-<date>

Similar to how our experimental tags work, we’ll automatically release a new sha-based tag nightly with the latest changes. If you’re familiar with our next process, we’re doing the same thing but just assigning meaningful labels.

We’re continuing to include sha’s in the version tag to discourage pinning to the alpha versions, since during the alpha and beta phase there may be unannounced breaking changes.

Once we hit RC, we’ll publish the release in a way that allows pinning, as in:

• 18.0.0-rc.0
• 18.0.0-rc.1
• 18.0.0-rc.2

[chantastic]

Thank you @caabernathy for clarity on releases and direction on how to use them successfully.

Related, I'm excited to start playing with useMutableSource, useOpaqueIdentifier 🤩🤩

[bluebill1049]

A couple of silly questions:

• Is there any documentation around useMutableSource, useOpaqueIdentifier?
• React 18 Alpha (Available now) How could we access that? Assume it's not a public version.

[markerikson]

• I don't think there's any published written docs, but the PRs that created those features (and the RFC for useMutableSource) have a lot of info about how they work and how they're intended to be used
• It sounds as if the React team auto-publishes nightly builds, and there's a next channel of some kind that is basically the same code as what will be in the alpha

[gaearon]

Not silly at all!

Re: those Hooks, not documented but you can search for their names in the React repo and find related tests. We’ll document them at some point between Alpha and Beta in the working group.

Re: Alpha, the latest @next release might likely be what we’ll tag as Alpha, but we’ll do the actual tagging in a week or two at the time of WG public announcement.

[bluebill1049]

Thanks, @markerikson & @gaearon for answering 👍 ❤️

[acdlite]

Will mention again, to avoid potential confusion, there won't just be a single alpha. There will be a new alpha autopublished every week day. We're going to start tagging our@next-tagged releases with @alpha to indicate the stability of the releases in that channel. Then when we upgrade it to beta we'll use the @beta tag, and so on.

So if you want to try out what the "alpha" today, you can do npm install react@next. Or you can ask npm for the latest version string and put that in your package.json manually:

npm info react@next version

Today that will output 0.0.0-d75105fa9 but after we tweak the versioning scheme it will look like 18.0.0-alpha-d75105fa.

Then the next day, there will be a new alpha release with version 18.0.0-alpha-<whatever _the_current_sha_is>

Concretely, these releases represent "the tip main branch of the React repo". Think of it as a continuous release cycle.

[acdlite]

I was thinking we could build a web page that displays the latest alpha/pre-release versions along with copy pastable instructions for how to install them. If someone wants to run with that idea that'd be great! We could even possibly share it in our blog post announcement.

[eps1lon]

I appreciate the clear outline on where the focus is for each phase 👍

We believe most of the features are stable, however, there is still some work to be done including finalizing new APIs such as useMutableSource, useOpaqueIdentifier, and stylesheets.

Do you have any details yet what "finalizing" includes? I'm mostly interested in useOpaqueIdentifier and more specifically:

1. suffixable opaque identifiers
2. opaque identifier lists
3. Bug: Can't hydrate useOpaqueIdentifier generated object in another component (though I haven't checked back if this still repros, writing a test now)

I guess 1. and 2. could work as feature releases.

[gaearon]

Yes, all of these things are on the list to get back to. Finalizing as in, “working out the remaining things and asking for feedback”, not making final what’s already exists.

[Andarist]

there is still some work to be done including finalizing new APIs such as useMutableSource, useOpaqueIdentifier, and stylesheets

I have already watched closely(-ish) the progress for the 2 mentioned hooks but that you are working (or that you are planning to work on) on some kind of stylesheets solution is new to me. Do you have any public information related to that? I don't think anything related to that got into React's repo (or did it?).

Is this planned work related to external stylesheets, CSS-in-JS or both? As Emotion's maintainer - this really interests me. I'm also very interested in knowing how server components could interact with CSS-in-JS, where one of the problems that I see is that CSS-in-JS libs are usually stateful (we ensure that styles are only injected once to the DOM) while the server components are supposed to be stateless.

I understand that since there is no post on this discussion board about this yet this might still be more of an experiment than the other two things mentioned and that you might not be able to share a lot of details just yet, but nevertheless - if you can share something about this, I would highly appreciate it 😉

[rickhanlonii]

Yes, this work is related to both and especially related to sever rendering! We'll be posting more about the problem space and possible solutions soon and would love to work with you and others on it through the workgroup.

[segunadebayo]

Thanks for putting this together @caabernathy. Perhaps, this discussion might be the first I can relate with 😂

As Chakra UI's maintainer, I'm really excited to learn more and test the useOpaqueIdentifier and Stylesheets API. We're currently evaluating CSS-in-JS solutions for the next major release and the Stylesheets API sounds interesting to me.

Question: Would this be similar to React Native's API or Stylex?

Can't wait to see more details about the problem space and solutions. Happy to contribute as well.

[gaearon]

Just to clarify, we don’t plan to provide a particular styling solution at this point. However, we do need to provide the low-level APIs for the existing solutions to work better with concurrent features. So it’s more about fixing the gaps.

[eps1lon]

Regarding alphas and betas: So react@next will install [email protected]<sha> and later [email protected]<sha>? react@alpha and react@beta won't be available?

Once we hit RC, we’ll publish the release using the standard npm RC tags.

What are the standard npm RC tags? As far as I know there are no standard tags. I've seen rc, alpha and beta but these are only colloquial.

[rickhanlonii]

Sorry for the confusion, we'll also be publishing to react@alpha and react@beta tags.

For the RC, we'll publish like we have in the past:

• 18.0.0-rc.0
• 18.0.0-rc.1
• ...
• 18.0.0-rc.n

This is more "standard" because it allows pinning.

[rickhanlonii]

Updated the post to clarify!

[sophiebits]

What do you mean, it allows pinning?

[eps1lon]

I'm guessing Ricky means "pinning to prerelease" with e.g. "react": "^18.0.0-rc.0" in your package.json (pinning to 18.0.0-rc) and npm resolving that to the latest release candidate available (on install with no lockfile) e.g. 18.0.0-rc.420. This wouldn't work with 18.0.0-alpha-<sha>. The difference is that SemVer uses alphanumeric precedence for dot separated identifiers only. So it wouldn't actually compare 18.0.0-alpha-<sha1> and 18.0.0-alpha-<sha2> at all.

[markerikson]

Just to confirm:

• Is useMutableSource available in the alphas / experimental builds right now?
• Is it expected to be finalized and included in React 18.0?

[rickhanlonii]

Good questions @markerikson:

• Yes, as unstable_useMutableSource
• Yes, it's expected to be included in React 18.0 stable

The plan is to iterate on it in the working group and after we confirm it's stable and can be used by libraries for the use case it's designed for, we'll drop the unstable prefix and then release it in 18. We'll post soon about the API where we can centralize the discussions/status!

[eps1lon]

If you're using eslint-plugin-react-hooks you probably also want to install eslint-plugin-react-hooks@alpha. The latest release still assumes the previous tuple order of useTransition. When using latest, const [pending, startTransition] = useTransition() react-hooks/exhaustive-deps will warn about startTransition missing as a dependency (in useEffect, useMemo etc) but not pending.

@caabernathy Should we include that notice in the initial post or rather release a new latest of eslint-plugin-react-hooks from facebook/react@a632f7d?

[gaearon]

Oh I think we should just release a patch with this.