Skip to content
2

Installing React 18 Alpha #9

Installing React 18 Alpha #9
May 27, 2021 · 7 comments · 13 replies

@caabernathy
caabernathy May 27, 2021
Maintainer

Installing React 18

To install the latest React 18 alpha, use the @alpha tag:

npm install react@alpha react-dom@alpha

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

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

Alpha

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

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

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

Replies

7 comments
·
13 replies
2

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 🤩🤩

0 replies
1

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.
5 replies
@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 👍 ❤️

1

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.

1 reply
@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.

1

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 😉

1 reply
@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.

1

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.

1 reply
@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.

1

Regarding alphas and betas: So react@next will install react@18.0.0-alpha-<sha> and later react@18.0.0-beta-<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.

4 replies
@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?

1

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?
1 reply
@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Announcement
Labels
None yet
Beta