RECENT POSTS

React Labs: What React Labs: What We've Been

Working On – June 2022

We've Been React v18.0

How to Upgrade to React 18

Working On – June
React Conf 2021 Recap
The Plan for React 18

2022
Introducing Zero-Bundle-Size
React Server Components
React v17.0

June 15, 2022 by Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Introducing the New JSX Transform

Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya React v17.0 Release Candidate: No
New Features
Gunasekaran, Sebastian Markbåge, and Xuan Huang
React v16.13.0
All posts ...

This blog site has been archived. Go to react.dev/blog to see the

recent posts.
React 18 was years in the making, and with it brought valuable lessons for
the React team. Its release was the result of many years of research and
exploring many paths. Some of those paths were successful; many more
were dead-ends that led to new insights. One lesson we’ve learned is that
it’s frustrating for the community to wait for new features without having
insight into these paths that we’re exploring.

We typically have a number of projects being worked on at any time,

React Labs: What We've Been
ranging from the more experimental to the clearly defined. Looking ahead, Working On – June 2022
we’d like to start regularly sharing more about what we’ve been working React v18.0
on with the community across these projects. How to Upgrade to React 18
React Conf 2021 Recap
To set expectations, this is not a roadmap with clear timelines. Many of The Plan for React 18
these projects are under active research and are difficult to put concrete Introducing Zero-Bundle-Size
ship dates on. They may possibly never even ship in their current iteration React Server Components

depending on what we learn. Instead, we want to share with you the React v17.0

problem spaces we’re actively thinking about, and what we’ve learned so Introducing the New JSX Transform

far. React v17.0 Release Candidate: No

New Features
React v16.13.0
All posts ...

Server Components

We announced an experimental demo of React Server Components (RSC)

in December 2020. Since then we’ve been finishing up its dependencies in
React 18, and working on changes inspired by experimental feedback.

In particular, we’re abandoning the idea of having forked I/O libraries (eg
react-fetch), and instead adopting an async/await model for better
compatibility. This doesn’t technically block RSC’s release because you can
also use routers for data fetching. Another change is that we’re also
moving away from the file extension approach in favor of annotating
boundaries.
React Labs: What We've Been
Working On – June 2022
We’re working together with Vercel and Shopify to unify bundler support React v18.0
for shared semantics in both Webpack and Vite. Before launch, we want to How to Upgrade to React 18
make sure that the semantics of RSCs are the same across the whole React React Conf 2021 Recap
ecosystem. This is the major blocker for reaching stable. The Plan for React 18
Introducing Zero-Bundle-Size
React Server Components
React v17.0

Asset Loading Introducing the New JSX Transform

React v17.0 Release Candidate: No
New Features
Currently, assets like scripts, external styles, fonts, and images are typically
React v16.13.0
preloaded and loaded using external systems. This can make it tricky to
All posts ...
coordinate across new environments like streaming, server components,
and more. We’re looking at adding APIs to preload and load deduplicated
external assets through React APIs that work in all React environments.
We’re also looking at having these support Suspense so you can have
images, CSS, and fonts that block display until they’re loaded but don’t
block streaming and concurrent rendering. This can help avoid
“popcorning“ as the visuals pop and layout shifts.

Static Server Rendering Optimizations

React Labs: What We've Been
Working On – June 2022
Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are React v18.0
great ways to get performance for cacheable pages, but we think we can How to Upgrade to React 18
add features to improve performance of dynamic Server Side Rendering React Conf 2021 Recap
(SSR) – especially when most but not all of the content is cacheable. We’re The Plan for React 18
exploring ways to optimize server rendering utilizing compilation and Introducing Zero-Bundle-Size
static passes. React Server Components
React v17.0
Introducing the New JSX Transform
React v17.0 Release Candidate: No
New Features
React Optimizing Compiler
React v16.13.0
All posts ...
We gave an early preview of React Forget at React Conf 2021. It’s a
compiler that automatically generates the equivalent of useMemo and
useCallback calls to minimize the cost of re-rendering, while retaining
React’s programming model.
Recently, we finished a rewrite of the compiler to make it more reliable and
capable. This new architecture allows us to analyze and memoize more
complex patterns such as the use of local mutations, and opens up many
new compile-time optimization opportunities beyond just being on par
with memoization hooks.

We’re also working on a playground for exploring many aspects of the

compiler. While the goal of the playground is to make development of the
React Labs: What We've Been
compiler easier, we think that it will make it easier to try it out and build Working On – June 2022
intuition for what the compiler does. It reveals various insights into how it React v18.0
works under the hood, and live renders the compiler’s outputs as you type. How to Upgrade to React 18
This will be shipped together with the compiler when it’s released. React Conf 2021 Recap
The Plan for React 18
Introducing Zero-Bundle-Size
React Server Components

Offscreen React v17.0

Introducing the New JSX Transform

Today, if you want to hide and show a component, you have two options. React v17.0 Release Candidate: No
New Features
One is to add or remove it from the tree completely. The problem with this
React v16.13.0
approach is that the state of your UI is lost each time you unmount,
All posts ...
including state stored in the DOM, like scroll position.

The other option is to keep the component mounted and toggle the
appearance visually using CSS. This preserves the state of your UI, but it
comes at a performance cost, because React must keep rendering the
hidden component and all of its children whenever it receives new
updates.

Offscreen introduces a third option: hide the UI visually, but deprioritize its
content. The idea is similar in spirit to the content-visibility CSS
property: when content is hidden, it doesn’t need to stay in sync with the
rest of the UI. React can defer the rendering work until the rest of the app
is idle, or until the content becomes visible again.
React Labs: What We've Been
Working On – June 2022
Offscreen is a low level capability that unlocks high level features. Similar React v18.0
to React’s other concurrent features like startTransition , in most cases How to Upgrade to React 18
you won’t interact with the Offscreen API directly, but instead via an React Conf 2021 Recap
opinionated framework to implement patterns like: The Plan for React 18
Introducing Zero-Bundle-Size
Instant transitions. Some routing frameworks already prefetch data to React Server Components
speed up subsequent navigations, like when hovering over a link. With
React v17.0
Offscreen, they’ll also be able to prerender the next screen in the
Introducing the New JSX Transform
background.
React v17.0 Release Candidate: No
Reusable state. Similarly, when navigating between routes or tabs, you can New Features
use Offscreen to preserve the state of the previous screen so you can switch React v16.13.0
back and pick up where you left off.
All posts ...
Virtualized list rendering. When displaying large lists of items, virtualized
list frameworks will prerender more rows than are currently visible. You can
use Offscreen to prerender the hidden rows at a lower priority than the
visible items in the list.
 Backgrounded content. We’re also exploring a related feature for
deprioritizing content in the background without hiding it, like when
displaying a modal overlay.

Transition Tracing

Currently, React has two profiling tools. The original Profiler shows an React Labs: What We've Been
Working On – June 2022
overview of all the commits in a profiling session. For each commit, it also
React v18.0
shows all components that rendered and the amount of time it took for
How to Upgrade to React 18
them to render. We also have a beta version of a Timeline Profiler
React Conf 2021 Recap
introduced in React 18 that shows when components schedule updates
The Plan for React 18
and when React works on these updates. Both of these profilers help
Introducing Zero-Bundle-Size
developers identify performance problems in their code. React Server Components
React v17.0
We’ve realized that developers don’t find knowing about individual slow Introducing the New JSX Transform
commits or components out of context that useful. It’s more useful to React v17.0 Release Candidate: No
know about what actually causes the slow commits. And that developers New Features
want to be able to track specific interactions (eg a button click, an initial React v16.13.0
load, or a page navigation) to watch for performance regressions and to All posts ...
understand why an interaction was slow and how to fix it.

We previously tried to solve this issue by creating an Interaction Tracing

API, but it had some fundamental design flaws that reduced the accuracy
of tracking why an interaction was slow and sometimes resulted in
interactions never ending. We ended up removing this API because of
these issues.

We are working on a new version for the Interaction Tracing API

(tentatively called Transition Tracing because it is initiated via
startTransition ) that solves these problems.

React Labs: What We've Been

Working On – June 2022
React v18.0
New React Docs How to Upgrade to React 18
React Conf 2021 Recap
Last year, we announced the beta version of the new React documentation The Plan for React 18
website. The new learning materials teach Hooks first and has new Introducing Zero-Bundle-Size
diagrams, illustrations, as well as many interactive examples and React Server Components

challenges. We took a break from that work to focus on the React 18 React v17.0

release, but now that React 18 is out, we’re actively working to finish and Introducing the New JSX Transform

ship the new documentation. React v17.0 Release Candidate: No

New Features
React v16.13.0
We are currently writing a detailed section about effects, as we’ve heard
All posts ...
that is one of the more challenging topics for both new and experienced
React users. Synchronizing with Effects is the first published page in the
series, and there are more to come in the following weeks. When we first
started writing a detailed section about effects, we’ve realized that many
common effect patterns can be simplified by adding a new primitive to
React. We’ve shared some initial thoughts on that in the useEvent RFC. It is
currently in early research, and we are still iterating on the idea. We
appreciate the community’s comments on the RFC so far, as well as the
feedback and contributions to the ongoing documentation rewrite. We’d
specifically like to thank Harish Kumar for submitting and reviewing many
improvements to the new website implementation.

Thanks to Sophie Alpert for reviewing this blog post!

React Labs: What We've Been
Working On – June 2022
React v18.0
How to Upgrade to React 18
Is this page useful? Edit this page
React Conf 2021 Recap
The Plan for React 18
Introducing Zero-Bundle-Size
React Server Components
React v17.0
Introducing the New JSX Transform
React v17.0 Release Candidate: No
New Features
React v16.13.0
All posts ...