React 18 is now available on npm!
Here’s an overview of what’s new in React 18, and what it means for the future.
Follow
Click to Follow reactjs
React
@reactjs
React is a JavaScript library for building user interfaces.
reactjs.orgJoined July 2013
React’s Tweets
In Dec 2020, we shared an initial preview of our work on Server Components. We often test new React features with teams at ; this time we also collaborated with other industry partners who volunteered including and .
Quote Tweet
As 2020 comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components. The demo is available now whether you want to play with it during the holiday, or when work picks back up in the new year. reactjs.org/server-compone
Show this thread
read image description
ALT
1
2
28
Show this thread
Excited to see the release today of Next.js 13, which includes beta support for React Server Components as part of the React architecture!
4
136
978
Show this thread
React is hiring a Manager in London!
This role will support the team working on developer experience across React, React Native, and Relay including the React DevTools, new app installs, upgrades, profiling, and other workflows.
Apply here or DM me:
16
56
186
React Native 0.69 is out with React 18 🎉, bundled Hermes 🎒, and more!
We go over the new release in this blog post:
70
390
1,583
Here's what the React team has been working on lately:
21
210
966
We're excited to share that Jest is transferring to the OpenJS Foundation!
We are grateful to Meta for creating Jest and look forward to the future of Jest as a project led by the Jest community.
7
260
1,128
There is an automated migration script that you can use to update your application code. It helps fix the most common issues when migrating TypeScript apps to React 18.
2
29
130
Show this thread
If you use TypeScript, the change you’ll most likely run into is the removal of implicit “children”. The previous typings incorrectly included “children” into props by default even though some components don’t accept children or accept a different type.
9
45
175
Show this thread
The React 18 TypeScript typings are out! As with most major releases, they include breaking changes to the types themselves. You can learn more about them here:
18
226
883
Show this thread
To clarify, this is a temporary upgrade suggestion to give the ecosystem maintainers time to update the libraries and code examples. The sooner you can add <StrictMode> back, the better!
Quote Tweet
Replying to @ralex1993 @TkDodo and @sreekar339
We do think it should <StrictMode> ideally be around the whole tree. The messaging about that has not changed. There is a temporary period where libraries aren’t compatible yet but you might want to start using 18. But we do expect you to add it back.
6
56
Show this thread
If your app doesn’t work after upgrading to React 18, the first thing to check is whether it’s wrapped in <StrictMode>. Strict Mode has gotten stricter in 18, but you can turn it off and address issues at your own pace later!
✨ More upgrading tips: reactjs.org/blog/2022/03/0
read image description
ALT
12
141
633
Show this thread
A small detail, but one that folks using server-side rendering might appreciate. React 18 adds an onRecoverableError callback to hydrateRoot so you can get notified about hydration mismatches in production. Helps find regressions!
Quote Tweet
Hidden gem in react 18: onRecoverableError configuration option for hydrateRoot.
Tacking hydration related errors separately really helped to declutter my sentry issue log.
5
35
209
“React decides when to bounce” is a neat way to put it. 😌
Quote Tweet
Day 17 of #100DaysOfCode | @reactjs 18!
React 18 is out and it's huge! 
Played around with useId and useDeferredValue. useDeferredValue kind of acts like debounce but React decides when to bounce! Really cool stuff! Those new hooks will be great for library maintainers!
Played around with useId and useDeferredValue. useDeferredValue kind of acts like debounce but React decides when to bounce! Really cool stuff! Those new hooks will be great for library maintainers!2
17
161
React Testing Library v13 with support for React 18 is now released.
Upgrade now if your app is using React 18.
npmjs.com/package/@testi
Many thanks for the hard work on this release!
5
45
194
0.68 is out! This release is the first to support the New React Native Architecture, marking an important milestone for the rollout!
Check out the blogpost for more details on changes and new architecture opt-in:
25
311
1,082
The full React 18.0.0 changelog is available in the React repository. We are thankful to everyone who tested our experimental releases, reported and fixed bugs, and provided feedback. We’re excited for the work ahead. github.com/facebook/react
read image description
ALT
4
31
195
Show this thread
We would like to thank all the members of the React 18 Working Group. The community’s critical feedback has been absolutely vital to this release and has led to many improvements we wouldn’t think of otherwise.
1
11
169
Show this thread
We’ve also prepared another blog post that documents how to upgrade your app to React 18. We expect that for most apps, it shouldn’t take more than a single afternoon:
3
14
134
Show this thread
For more information about React 18 and a full changelog, please check out our release blog post:
1
8
112
Show this thread
To learn more about the new Suspense server rendering architecture in React 18, you can watch ’s talk:
1
25
161
Show this thread
Suspense also enables selective hydration. React 18 can start hydrating the HTML before all JavaScript code loads. Specifically, content wrapped in <Suspense> will not block the rest of the page from hydrating! If you start interacting, React will prioritize hydrating that area.
read image description
ALT
1
13
168
Show this thread
If you wait for some data to load on the server, React can now stream HTML for the fallback (for example, a spinner) and let the user see the rest of the page. When the data is ready, React sends the content HTML along with a <script> tag to insert it into the right place.
read image description
ALT
3
42
362
Show this thread
React 18 includes two big improvements for server-rendered apps. Both of these improvements are unlocked by a single Suspense API. On the server, Suspense enables progressively streaming HTML. On the client, Suspense enables selective hydration.
What does this mean? 🤔
read image description
ALT
3
37
297
Show this thread
React 18 also adds Transitions. Transitions let you split a state update into an urgent part (for example, updating the input) and a transition (for example, changing the content of a list). Transitions are interruptible, don’t block user input, and keep your app more responsive.
read image description
ALT
3
32
375
Show this thread
React 18 adds automatic batching. Batching is when React combines multiple setState() calls into a single re-render to improve performance.
Previously, React only batched updates inside event handlers. In React 18, more updates are batched by default, improving performance.
read image description
ALT
5
56
472
Show this thread
Last but not the least, this RFC describes a new mechanism in React 18 that lets your app automatically recover from server rendering errors. React would use the same mechanism to safely re-render a part of the tree whenever there is a hydration mismatch.
10
69
Show this thread
Additionally, React 18 introduces a new Hook called useSyncExternalStore. Library developers can use it to integrate React with external data stores in a way that works with concurrent rendering.
2
4
89
Show this thread