React Conf 2021 Recap

<div class="scary">
<blockquote>
<p>This blog site has been archived. Go to <a href="https://react.dev/blog" target="_blank" rel="nofollow noopener noreferrer">react.dev/blog</a> to see the recent posts.</p>
</blockquote>
</div>
<blockquote>
<p>Update Nov. 15th, 2021</p>
<p>React 18 is now in beta. More information about the status of the release is <a href="https://github.com/reactwg/react-18/discussions/112" target="_blank" rel="nofollow noopener noreferrer">available in the React 18 Working Group post</a>.</p>
</blockquote>
<p>The React team is excited to share a few updates:</p>
<ol>
<li>We’ve started work on the React 18 release, which will be our next major version.</li>
<li>We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18.</li>
<li>We’ve published a React 18 Alpha so that library authors can try it and provide feedback.</li>
</ol>
<p>These updates are primarily aimed at maintainers of third-party libraries. If you’re learning, teaching, or using React to build user-facing applications, you can safely ignore this post. But you are welcome to follow the discussions in the React 18 Working Group if you’re curious!</p>
<h2 id="whats-coming-in-react-18"><a href="#whats-coming-in-react-18" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What’s coming in React 18 </h2>
<p>When it’s released, React 18 will include out-of-the-box improvements (like <a href="https://github.com/reactwg/react-18/discussions/21" target="_blank" rel="nofollow noopener noreferrer">automatic batching</a>), new APIs (like <a href="https://github.com/reactwg/react-18/discussions/41" target="_blank" rel="nofollow noopener noreferrer"><code class="gatsby-code-text">startTransition</code></a>), and a <a href="https://github.com/reactwg/react-18/discussions/37" target="_blank" rel="nofollow noopener noreferrer">new streaming server renderer</a> with built-in support for <code class="gatsby-code-text">React.lazy</code>.</p>
<p>These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app.</p>
<p>If you’ve been following our research into the future of React (we don’t expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means <strong>you will be able to adopt React 18 without rewrites and try the new features at your own pace.</strong></p>
<h2 id="a-gradual-adoption-strategy"><a href="#a-gradual-adoption-strategy" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>A gradual adoption strategy </h2>
<p>Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. <strong>You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release</strong>. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon.</p>
<p>We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we’ve found that most React components “just work” without additional changes. We’re committed to making sure this is a smooth upgrade for the entire community, so today we’re announcing the React 18 Working Group.</p>
<h2 id="working-with-the-community"><a href="#working-with-the-community" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Working with the community </h2>
<p>We’re trying something new for this release: We’ve invited a panel of experts, developers, library authors, and educators from across the React community to participate in our <a href="https://github.com/reactwg/react-18" target="_blank" rel="nofollow noopener noreferrer">React 18 Working Group</a> to provide feedback, ask questions, and collaborate on the release. We couldn’t invite everyone we wanted to this initial, small group, but if this experiment works out, we hope there will be more in the future!</p>
<p><strong>The goal of the React 18 Working Group is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries.</strong> The Working Group is hosted on <a href="https://github.com/reactwg/react-18/discussions" target="_blank" rel="nofollow noopener noreferrer">GitHub Discussions</a> and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog.</p>
<p>For more information on upgrading to React 18, or additional resources about the release, see the <a href="https://github.com/reactwg/react-18/discussions/4" target="_blank" rel="nofollow noopener noreferrer">React 18 announcement post</a>.</p>
<h2 id="accessing-the-react-18-working-group"><a href="#accessing-the-react-18-working-group" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessing the React 18 Working Group </h2>
<p>Everyone can read the discussions in the <a href="https://github.com/reactwg/react-18" target="_blank" rel="nofollow noopener noreferrer">React 18 Working Group repo</a>.</p>
<p>Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community.</p>
<p>As always, you can submit bug reports, questions, and general feedback to our <a href="https://github.com/facebook/react/issues" target="_blank" rel="nofollow noopener noreferrer">issue tracker</a>.</p>
<h2 id="how-to-try-react-18-alpha-today"><a href="#how-to-try-react-18-alpha-today" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>How to try React 18 Alpha today </h2>
<p>New alphas are <a href="https://github.com/reactwg/react-18/discussions/9" target="_blank" rel="nofollow noopener noreferrer">regularly published to npm using the <code class="gatsby-code-text">@alpha</code> tag</a>. These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in an alpha the following weekday.</p>
<p>There may be significant behavioral or API changes between alpha releases. Please remember that <strong>alpha releases are not recommended for user-facing, production applications</strong>.</p>
<h2 id="projected-react-18-release-timeline"><a href="#projected-react-18-release-timeline" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Projected React 18 release timeline </h2>
<p>We don’t have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications.</p>
<ul>
<li>Library Alpha: Available today</li>
<li>Public Beta: At least several months</li>
<li>Release Candidate (RC): At least several weeks after Beta</li>
<li>General Availability: At least several weeks after RC</li>
</ul>
<p>More details about our projected release timeline are <a href="https://github.com/reactwg/react-18/discussions/9" target="_blank" rel="nofollow noopener noreferrer">available in the Working Group</a>. We’ll post updates on this blog when we’re closer to a public release.</p>

The Plan for React 18

<div class="scary">
<blockquote>
<p>This blog site has been archived. Go to <a href="https://react.dev/blog" target="_blank" rel="nofollow noopener noreferrer">react.dev/blog</a> to see the recent posts.</p>
</blockquote>
</div>
<p>2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size <strong>React Server Components</strong>.</p>
<p>To introduce React Server Components, we have prepared a talk and a demo. If you want, you can check them out during the holidays, or later when work picks back up in the new year.</p>
<br>
<div class="gatsby-resp-iframe-wrapper" style="padding-bottom: 56.25%; position: relative; height: 0; overflow: hidden; " > <iframe src="https://www.youtube.com/embed/TQQPAU21ZUw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; "></iframe> </div>
<p><strong>React Server Components are still in research and development.</strong> We are sharing this work in the spirit of transparency and to get initial feedback from the React community. There will be plenty of time for that, so <strong>don’t feel like you have to catch up right now!</strong></p>
<p>If you want to check them out, we recommend to go in the following order:</p>
<ol>
<li><strong>Watch the talk</strong> to learn about React Server Components and see the demo.</li>
<li><strong><a href="http://github.com/reactjs/server-components-demo" target="_blank" rel="nofollow noopener noreferrer">Clone the demo</a></strong> to play with React Server Components on your computer.</li>
<li><strong><a href="https://github.com/reactjs/rfcs/pull/188" target="_blank" rel="nofollow noopener noreferrer">Read the RFC (with FAQ at the end)</a></strong> for a deeper technical breakdown and to provide feedback.</li>
</ol>
<p>We are excited to hear from you on the RFC or in replies to the <a href="https://twitter.com/reactjs" target="_blank" rel="nofollow noopener noreferrer">@reactjs</a> Twitter handle. Happy holidays, stay safe, and see you next year!</p>

Introducing Zero-Bundle-Size React Server Components

Upgrading to React 18 might seem daunting, but it's well worth the effort. Packed with groundbreaking features like concurrent rendering and automatic batching, React 18 takes your app's performance to the next level. So, ready to dive in? Let’s break it down step by step.

React 18 automatically batches updates, improving app performance by reducing unnecessary renders. This feature is particularly helpful when managing multiple state updates.

Concurrent rendering enables React to prepare multiple updates simultaneously, making your app feel snappier and more responsive.

The new Transitions API helps you prioritize updates, ensuring that urgent interactions like button clicks don’t get delayed.

Before diving into the upgrade process, take some preparatory steps:

: Ensure your project uses a Node.js version compatible with React 18.

: Keeping these updated minimizes potential conflicts.

: Upgrading from React 16? There might be additional changes to address compared to upgrading from React 17.

Ensure all peer dependencies in your project support React 18.

Run your app and identify potential issues:

Pay attention to console warnings and errors related to deprecated APIs.

 API for concurrent rendering. Update your 

Check if the libraries you use are compatible with React 18. Most popular libraries have already released updates to support the new version.

Here’s an example of how to incorporate concurrent features:

: Review your app for unnecessary renders.

: Debug using React DevTools, now enhanced for React 18.

By upgrading, you unlock faster rendering times, smoother user interactions, and powerful new tools for developers. It’s like upgrading your car from a standard engine to a turbocharged one – everything just works better.

Upgrade incrementally, tackling one feature at a time.

Companies have reported up to a 20% improvement in app performance after adopting React 18. It’s particularly beneficial for complex apps with heavy interactivity.

Upgrading to React 18 is a smart move that enhances your app’s performance and keeps it future-ready. Take it one step at a time, and you’ll reap the benefits in no time.

How to Upgrade to React 18

React components are the building blocks of any React application. Think of them as reusable pieces of code that define how a specific part of your UI should look and behave. Whether it's a button, a form, or an entire page, components help you structure your application efficiently.

React components come in two main flavours:


These are JavaScript functions that return JSX (JavaScript XML). They are simple, lightweight, and perfect for UI elements that don’t require much logic.


Although less common with modern React, class components use ES6 classes to define state and lifecycle methods.

React’s Component Identification System

React relies heavily on capitalization to distinguish between custom components and standard HTML tags.

How React Differentiates Components from HTML Tags

 are interpreted as built-in HTML elements. Meanwhile, names like <MyComponent> signal React that you're referencing a custom component.

Technical Reasons for Starting with a Capital Letter

JSX is a syntax extension of JavaScript, and its parser uses capitalization to determine whether an element is a component or an HTML tag.

JavaScript is case-sensitive, and React leverages this to enforce clear distinctions between tags and components.

While it feels like a coding convention, this is actually a technical requirement. Failing to capitalize a component name can cause React to misinterpret it.

How React Handles Lowercase Component Names

When a component name starts with a lowercase letter, React assumes it’s a standard HTML tag. For example, 

 would try to render as a custom element 

Debugging Issues with Lowercase Component Names

Misinterpreted components can lead to cryptic bugs, making troubleshooting unnecessarily complex.

Importance of Naming Conventions in React

Capitalized names improve code readability, making it instantly clear which elements are components.

Following conventions ensures your codebase remains easy to maintain and scale.

Clear naming conventions simplify onboarding and foster consistency across your team.

In this case, React will treat <header /> as an HTML tag rather than your component.

Forgetting to Capitalize Custom Components

Ensure your components follow the PascalCase naming convention.

Confusing HTML Tags with React Components

Avoid naming components like standard HTML tags (e.g., Div or Span) to prevent confusion.

Best Practices for React Component Naming

Always start component names with a capital letter.

Choose meaningful names that reflect the component’s purpose.

React components need to start with capital letters to help React distinguish them from HTML elements, making your code more predictable and error-free. Following this rule isn’t just a technical necessity; it’s a best practice that ensures clean, maintainable, and collaborative coding.

Why React Components Must Begin with Capital Letters

<div class="scary">
<blockquote>
<p>This blog site has been archived. Go to <a href="https://react.dev/blog" target="_blank" rel="nofollow noopener noreferrer">react.dev/blog</a> to see the recent posts.</p>
</blockquote>
</div>
<p><a href="https://reactjs.org/blog/2022/03/29/react-v18.html" target="_blank" rel="nofollow noopener noreferrer">React 18</a> 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.</p>
<p>We typically have a number of projects being worked on at any time, ranging from the more experimental to the clearly defined. Looking ahead, we’d like to start regularly sharing more about what we’ve been working on with the community across these projects.</p>
<p>To set expectations, this is not a roadmap with clear timelines. Many of these projects are under active research and are difficult to put concrete ship dates on. They may possibly never even ship in their current iteration depending on what we learn. Instead, we want to share with you the problem spaces we’re actively thinking about, and what we’ve learned so far.</p>
<h2 id="server-components"><a href="#server-components" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Server Components </h2>
<p>We announced an <a href="https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html" target="_blank" rel="nofollow noopener noreferrer">experimental demo of React Server Components</a> (RSC) in December 2020. Since then we’ve been finishing up its dependencies in React 18, and working on changes inspired by experimental feedback.</p>
<p>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 <a href="https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278" target="_blank" rel="nofollow noopener noreferrer">annotating boundaries</a>.</p>
<p>We’re working together with Vercel and Shopify to unify bundler support for shared semantics in both Webpack and Vite. Before launch, we want to make sure that the semantics of RSCs are the same across the whole React ecosystem. This is the major blocker for reaching stable.</p>
<h2 id="asset-loading"><a href="#asset-loading" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Asset Loading </h2>
<p>Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to 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.</p>
<p>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 <a href="https://twitter.com/sebmarkbage/status/1516852731251724293" target="_blank" rel="nofollow noopener noreferrer">“popcorning“</a> as the visuals pop and layout shifts.</p>
<h2 id="static-server-rendering-optimizations"><a href="#static-server-rendering-optimizations" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Server Rendering Optimizations </h2>
<p>Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are great ways to get performance for cacheable pages, but we think we can add features to improve performance of dynamic Server Side Rendering (SSR) – especially when most but not all of the content is cacheable. We’re exploring ways to optimize server rendering utilizing compilation and static passes.</p>
<h2 id="react-compiler"><a href="#react-compiler" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Optimizing Compiler </h2>
<p>We gave an <a href="https://www.youtube.com/watch?v=lGEMwh32soc" target="_blank" rel="nofollow noopener noreferrer">early preview</a> of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of <code class="gatsby-code-text">useMemo</code> and <code class="gatsby-code-text">useCallback</code> calls to minimize the cost of re-rendering, while retaining React’s programming model.</p>
<p>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 <a href="https://react.dev/learn/keeping-components-pure#local-mutation-your-components-little-secret" target="_blank" rel="nofollow noopener noreferrer">local mutations</a>, and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks.</p>
<p>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 compiler easier, we think that it will make it easier to try it out and build intuition for what the compiler does. It reveals various insights into how it works under the hood, and live renders the compiler’s outputs as you type. This will be shipped together with the compiler when it’s released.</p>
<h2 id="offscreen"><a href="#offscreen" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Offscreen </h2>
<p>Today, if you want to hide and show a component, you have two options. One is to add or remove it from the tree completely. The problem with this approach is that the state of your UI is lost each time you unmount, including state stored in the DOM, like scroll position.</p>
<p>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.</p>
<p>Offscreen introduces a third option: hide the UI visually, but deprioritize its content. The idea is similar in spirit to the <code class="gatsby-code-text">content-visibility</code> 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.</p>
<p>Offscreen is a low level capability that unlocks high level features. Similar to React’s other concurrent features like <code class="gatsby-code-text">startTransition</code>, in most cases you won’t interact with the Offscreen API directly, but instead via an opinionated framework to implement patterns like:</p>
<ul>
<li><strong>Instant transitions.</strong> Some routing frameworks already prefetch data to speed up subsequent navigations, like when hovering over a link. With Offscreen, they’ll also be able to prerender the next screen in the background.</li>
<li><strong>Reusable state.</strong> Similarly, when navigating between routes or tabs, you can use Offscreen to preserve the state of the previous screen so you can switch back and pick up where you left off.</li>
<li><strong>Virtualized list rendering.</strong> 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.</li>
<li><strong>Backgrounded content.</strong> We’re also exploring a related feature for deprioritizing content in the background without hiding it, like when displaying a modal overlay.</li>
</ul>
<h2 id="transition-tracing"><a href="#transition-tracing" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Transition Tracing </h2>
<p>Currently, React has two profiling tools. The <a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html" target="_blank" rel="nofollow noopener noreferrer">original Profiler</a> shows an overview of all the commits in a profiling session. For each commit, it also shows all components that rendered and the amount of time it took for them to render. We also have a beta version of a <a href="https://github.com/reactwg/react-18/discussions/76" target="_blank" rel="nofollow noopener noreferrer">Timeline Profiler</a> introduced in React 18 that shows when components schedule updates and when React works on these updates. Both of these profilers help developers identify performance problems in their code.</p>
<p>We’ve realized that developers don’t find knowing about individual slow commits or components out of context that useful. It’s more useful to know about what actually causes the slow commits. And that developers want to be able to track specific interactions (eg a button click, an initial load, or a page navigation) to watch for performance regressions and to understand why an interaction was slow and how to fix it.</p>
<p>We previously tried to solve this issue by creating an <a href="https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16" target="_blank" rel="nofollow noopener noreferrer">Interaction Tracing API</a>, 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 <a href="https://github.com/facebook/react/pull/20037" target="_blank" rel="nofollow noopener noreferrer">removing this API</a> because of these issues.</p>
<p>We are working on a new version for the Interaction Tracing API (tentatively called Transition Tracing because it is initiated via <code class="gatsby-code-text">startTransition</code>) that solves these problems.</p>
<h2 id="new-react-docs"><a href="#new-react-docs" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>New React Docs </h2>
<p>Last year, we announced the <a href="https://react.dev/" target="_blank" rel="nofollow noopener noreferrer">beta version</a> of the new React documentation website. The new learning materials teach Hooks first and has new diagrams, illustrations, as well as many interactive examples and challenges. We took a break from that work to focus on the React 18 release, but now that React 18 is out, we’re actively working to finish and ship the new documentation.</p>
<p>We are currently writing a detailed section about effects, as we’ve heard that is one of the more challenging topics for both new and experienced React users. <a href="https://react.dev/learn/synchronizing-with-effects" target="_blank" rel="nofollow noopener noreferrer">Synchronizing with Effects</a> 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 <a href="https://github.com/reactjs/rfcs/pull/220" target="_blank" rel="nofollow noopener noreferrer">useEvent RFC</a>. 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 <a href="https://github.com/reactjs/reactjs.org/issues/3308" target="_blank" rel="nofollow noopener noreferrer">feedback</a> and contributions to the ongoing documentation rewrite. We’d specifically like to thank <a href="https://github.com/harish-sethuraman" target="_blank" rel="nofollow noopener noreferrer">Harish Kumar</a> for submitting and reviewing many improvements to the new website implementation.</p>
<p><em>Thanks to <a href="https://twitter.com/sophiebits" target="_blank" rel="nofollow noopener noreferrer">Sophie Alpert</a> for reviewing this blog post!</em></p>