# React A JavaScript library for building user interfaces This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## React Labs: What We've Been Working On - June 2022 DevFeed: [React Labs: What We've Been Working On - June 2022]() Original publisher: [Read original article]() Published: 2022-06-15T00:00:00Z Content type: article Language: en Sources: [React]() Topics: [React](), [async/await](), [Shopify](), [Vercel](), [Vite](), [Webpack]() Tags: [async](), [await](), [compatibility](), [experimental](), [react](), [release](), [shopify](), [vercel](), [vite](), [webpack]() ### AI overview A June 2022 React Labs update describes ongoing research following the React 18 release, including experimental React Server Components. The React team discusses adopting async/await, annotating boundaries, coordinating bundler semantics across Webpack and Vite with Vercel and Shopify, and improving asset loading APIs. The projects had no firm timelines and might change or never ship in their current form. ### Source excerpt 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, 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. 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. 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. 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. Asset Loa ## React v18.0 DevFeed: [React v18.0]() Original publisher: [Read original article]() Published: 2022-03-29T00:00:00Z Content type: release Language: en Sources: [React]() Topics: [React](), [Concurrency](), [Server-side rendering]() Tags: [batching](), [concurrency](), [new-features](), [npm](), [react](), [release](), [server-side-rendering](), [upgrade]() ### AI overview React 18 is released on npm with automatic batching, new APIs including startTransition, and streaming server-side rendering with Suspense. The release is built on an opt-in concurrent renderer and includes a gradual adoption path for existing users. ### Source excerpt This blog site has been archived. Go to react.dev/blog to see the recent posts. React 18 is now available on npm! In our last post, we shared step-by-step instructions for upgrading your app to React 18. In this post, we'll give an overview of what's new in React 18, and what it means for the future. Our latest major version includes out-of-the-box improvements like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense. Many of the features in React 18 are built on top of our new concurrent renderer, a behind-the-scenes change that unlocks powerful new capabilities. Concurrent React is opt-in -- it's only enabled when you use a concurrent feature -- but we think it will have a big impact on the way people build applications. We've spent years researching and developing support for concurrency in React, and we've taken extra care to provide a gradual adoption path for existing users. Last summer, we formed the React 18 Working Group to gather feedback from experts in the community and ensure a smooth upgrade experience for the entire React ecosystem. In case you missed it, we shared a lot of this vision at React Conf 2021: In the keynote, we explain how React 18 fits into our mission to make it easy for developers to build great user experiences Shruti Kapoor demonstrated how to use the new features in React 18 Shaundai Person gave us an overview of streaming server rendering with Suspense Below is a full overview of what to expect in this release, starting with Concurrent Rendering. Note for React Native users: React 18 will ship in React Native with the New React Native Architecture. For more information, see the React Conf keynote here. What is Concurrent React? The most important addition in React 18 is something we hope you never have to think about: concurrency. We think this is largely true for application developers, though the story may be a bit more complicated for library maintainers. Concurrency is ## How to Upgrade to React 18 DevFeed: [How to Upgrade to React 18]() Original publisher: [Read original article]() Published: 2022-03-08T00:00:00Z Content type: tutorial Language: en Sources: [React]() Topics: [React](), [upgrade](), [Server-side rendering](), [TypeScript](), [Streaming](), [React Native]() Tags: [api](), [code](), [deprecated](), [how-to](), [install](), [migration](), [npm](), [react](), [react-native](), [server-side-rendering](), [streaming](), [typescript](), [upgrade]() ### AI overview This React blog article guides developers through upgrading existing applications to React 18. It covers installation, the new createRoot API, changes to client rendering and unmounting, server-side rendering and streaming APIs, TypeScript dependency updates, and an automated migration script. ### Source excerpt This blog site has been archived. Go to react.dev/blog to see the recent posts. As we shared in the release post, React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18. Please report any issues you encounter while upgrading to React 18. Note for React Native users: React 18 will ship in a future version of React Native. This is because React 18 relies on the New React Native Architecture to benefit from the new capabilities presented in this blogpost. For more information, see the React Conf keynote here. Installing To install the latest version of React: npm install react react-dom Or if you're using yarn: yarn add react react-dom Updates to Client Rendering APIs When you first install React 18, you will see a warning in the console: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features. // Before import { render } from 'react-dom'; const container = document.getElementById('app'); render(, container); // After import { createRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = createRoot(container); // createRoot(container!) if you use TypeScript root.render(); We've also changed unmountComponentAtNode to root.unmount: // Before unmountComponentAtNode(container); // After root.unmount(); We've also removed the callback from render, since it usually does not have the expected result when using Suspense: // Before const container = document.getElementById('app'); render(, ## React Conf 2021 Recap DevFeed: [React Conf 2021 Recap]() Original publisher: [Read original article]() Published: 2021-12-17T00:00:00Z Content type: article Language: en Sources: [React]() Topics: [React](), [Server-side rendering](), [React Native](), [Streaming](), [Accessibility](), [Discord]() Tags: [accessibility](), [concurrent](), [conference](), [react](), [react-native](), [recap](), [release](), [server-side-rendering](), [streaming]() ### AI overview A recap of React Conf 2021 covering React's multi-platform vision, the release of React 18, and the gradual adoption of concurrent features. It also discusses Suspense, Server Components, working groups, React Native, and improvements to server-side rendering, including streaming HTML. ### Source excerpt This blog site has been archived. Go to react.dev/blog to see the recent posts. Last week we hosted our 6th React Conf. In previous years, we've used the React Conf stage to deliver industry changing announcements such as React Native and React Hooks. This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features. This was the first time React Conf was hosted online, and it was streamed for free, translated to 8 different languages. Participants from all over the world joined our conference Discord and the replay event for accessibility in all timezones. Over 50,000 people registered, with over 60,000 views of 19 talks, and 5,000 participants in Discord across both events. All the talks are available to stream online. Here's a summary of what was shared on stage: React 18 and concurrent features In the keynote, we shared our vision for the future of React starting with React 18. React 18 adds the long-awaited concurrent renderer and updates to Suspense without any major breaking changes. Apps can upgrade to React 18 and begin gradually adopting concurrent features with the amount of effort on par with any other major release. This means there is no concurrent mode, only concurrent features. In the keynote, we also shared our vision for Suspense, Server Components, new React working groups, and our long-term many-platform vision for React Native. Watch the full keynote from Andrew Clark, Juan Tejada, Lauren Tan, and Rick Hanlon here: React 18 for Application Developers In the keynote, we also announced that the React 18 RC is available to try now. Pending further feedback, this is the exact version of React that we will publish to stable early next year. To try the React 18 RC, upgrade your dependencies: npm install react@rc react-dom@rc and switch to the new createRoot API: // before const container = document.getElementById('root'); ReactDOM.render(, container); // after const conta ## The Plan for React 18 DevFeed: [The Plan for React 18]() Original publisher: [Read original article]() Published: 2021-06-08T00:00:00Z Content type: release Language: en Sources: [React]() Topics: [React](), [Concurrency](), [upgrade]() Tags: [apis](), [batching](), [concurrency](), [information](), [react](), [streaming](), [upgrade]() ### AI overview The React team outlines the plan for React 18, including a Working Group, an Alpha release for library authors, automatic batching, new APIs, and a streaming server renderer. React 18 introduces opt-in concurrent rendering and a gradual upgrade strategy. ### Source excerpt This blog site has been archived. Go to react.dev/blog to see the recent posts. Update Nov. 15th, 2021 React 18 is now in beta. More information about the status of the release is available in the React 18 Working Group post. The React team is excited to share a few updates: We've started work on the React 18 release, which will be our next major version. We've created a Working Group to prepare the community for gradual adoption of new features in React 18. We've published a React 18 Alpha so that library authors can try it and provide feedback. 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! What's coming in React 18 When it's released, React 18 will include out-of-the-box improvements (like automatic batching), new APIs (like startTransition), and a new streaming server renderer with built-in support for React.lazy. 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. 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 you will be able to adopt React 18 without rewrites and try the new features at your own pace. A gradual adoption strategy Since concurrency in React 18 is opt-in ## Introducing Zero-Bundle-Size React Server Components DevFeed: [Introducing Zero-Bundle-Size React Server Components]() Original publisher: [Read original article]() Published: 2020-12-21T00:00:00Z Content type: article Language: en Sources: [React]() Topics: [React](), [Development]() Tags: [community](), [demo](), [react](), [technical](), [update]() ### AI overview This holiday update introduces React Server Components, describing them as zero-bundle-size research and development work. It provides a talk, demo, and RFC for learning about the project and giving feedback. ### Source excerpt This blog site has been archived. Go to react.dev/blog to see the recent posts. 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 React Server Components. 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. React Server Components are still in research and development. 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 don't feel like you have to catch up right now! If you want to check them out, we recommend to go in the following order: Watch the talk to learn about React Server Components and see the demo. Clone the demo to play with React Server Components on your computer. Read the RFC (with FAQ at the end) for a deeper technical breakdown and to provide feedback. We are excited to hear from you on the RFC or in replies to the @reactjs Twitter handle. Happy holidays, stay safe, and see you next year! ## React v17.0 DevFeed: [React v17.0]() Original publisher: [Read original article]() Published: 2020-10-20T00:00:00Z Content type: release Language: en Sources: [React]() Topics: [React](), [upgrade](), [App](), [dialog]() Tags: [developer](), [react](), [release](), [upgrade]() ### AI overview React 17 is released as a stepping-stone update focused on making React upgrades easier. It enables safer coexistence of different React versions and supports gradual upgrades, while adding no new developer-facing features. ### Source excerpt This blog site has been archived. Go to react.dev/blog to see the recent posts. Today, we are releasing React 17! We've written at length about the role of the React 17 release and the changes it contains in the React 17 RC blog post. This post is a brief summary of it, so if you've already read the RC post, you can skip this one. No New Features The React 17 release is unusual because it doesn't add any new developer-facing features. Instead, this release is primarily focused on making it easier to upgrade React itself. In particular, React 17 is a "stepping stone" release that makes it safer to embed a tree managed by one version of React inside a tree managed by a different version of React. It also makes it easier to embed React into apps built with other technologies. Gradual Upgrades React 17 enables gradual React upgrades. When you upgrade from React 15 to 16 (or, this time, from React 16 to 17), you would usually upgrade your whole app at once. This works well for many apps. But it can get increasingly challenging if the codebase was written more than a few years ago and isn't actively maintained. And while it's possible to use two versions of React on the page, until React 17 this has been fragile and caused problems with events. We're fixing many of those problems with React 17. This means that when React 18 and the next future versions come out, you will now have more options. The first option will be to upgrade your whole app at once, like you might have done before. But you will also have an option to upgrade your app piece by piece. For example, you might decide to migrate most of your app to React 18, but keep some lazy-loaded dialog or a subroute on React 17. This doesn't mean you have to do gradual upgrades. For most apps, upgrading all at once is still the best solution. Loading two versions of React -- even if one of them is loaded lazily on demand -- is still not ideal. However, for larger apps that aren't actively maintained, this option makes sen ## Introducing the New JSX Transform DevFeed: [Introducing the New JSX Transform]() Original publisher: [Read original article]() Published: 2020-09-22T00:00:00Z Content type: article Language: en Sources: [React]() Topics: [React](), [Babel](), [JavaScript](), [TypeScript]() Tags: [babel](), [compiler](), [javascript](), [react](), [typescript](), [upgrade]() ### AI overview This React 17 article introduces a rewritten JSX transform supported by Babel and TypeScript. The optional upgrade allows JSX without importing React, may slightly reduce compiled bundle size depending on the setup, and preserves the existing JSX syntax and older transform. ### Source excerpt This blog site has been archived. Go to react.dev/blog to see the recent posts. Although React 17 doesn't contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it. What's a JSX Transform? Browsers don't understand JSX out of the box, so most React users rely on a compiler like Babel or TypeScript to transform JSX code into regular JavaScript. Many preconfigured toolkits like Create React App or Next.js also include a JSX transform under the hood. Together with the React 17 release, we've wanted to make a few improvements to the JSX transform, but we didn't want to break existing setups. This is why we worked with Babel to offer a new, rewritten version of the JSX transform for people who would like to upgrade. Upgrading to the new transform is completely optional, but it has a few benefits: With the new transform, you can use JSX without importing React. Depending on your setup, its compiled output may slightly improve the bundle size. It will enable future improvements that reduce the number of concepts you need to learn React. This upgrade will not change the JSX syntax and is not required. The old JSX transform will keep working as usual, and there are no plans to remove the support for it. React 17 RC already includes support for the new transform, so go give it a try! To make it easier to adopt, we've also backported its support to React 16.14.0, React 15.7.0, and React 0.14.10. You can find the upgrade instructions for different tools below. Now let's take a closer look at the differences between the old and the new transform. What's Different in the New Transform? When you use JSX, the compiler transforms it into React function calls that the browser can understand. The old JSX transform turned JSX into React.createElement(...) calls. For example, let's say your source code looks like this: import React from 'react'; function App() { return

Hello World

; } Under t ## React v17.0 Release Candidate: No New Features DevFeed: [React v17.0 Release Candidate: No New Features]() Original publisher: [Read original article]() Published: 2020-08-10T00:00:00Z Content type: release Language: en Sources: [React]() Topics: [React](), [upgrade]() Tags: [blog](), [features](), [react](), [release]() ### AI overview The React 17 Release Candidate focuses on making React easier to upgrade rather than adding new developer-facing features. It introduces a safer path for gradual upgrades and for embedding trees managed by different React versions. ### Source excerpt This blog site has been archived. Go to react.dev/blog to see the recent posts. Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since the previous major release of React, which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release. No New Features The React 17 release is unusual because it doesn't add any new developer-facing features. Instead, this release is primarily focused on making it easier to upgrade React itself. We're actively working on the new React features, but they're not a part of this release. The React 17 release is a key part of our strategy to roll them out without leaving anyone behind. In particular, React 17 is a "stepping stone" release that makes it safer to embed a tree managed by one version of React inside a tree managed by a different version of React. Gradual Upgrades For the past seven years, React upgrades have been "all-or-nothing". Either you stay on an old version, or you upgrade your whole app to a new version. There was no in-between. This has worked out so far, but we are running into the limits of the "all-or-nothing" upgrade strategy. Some API changes, for example, deprecating the legacy context API, are impossible to do in an automated way. Even though most apps written today don't ever use them, we still support them in React. We have to choose between supporting them in React indefinitely or leaving some apps behind on an old version of React. Both of these options aren't great. So we wanted to provide another option. React 17 enables gradual React upgrades. When you upgrade from React 15 to 16 (or, soon, from React 16 to 17), you would usually upgrade your whole app at once. This works well for many apps. But it can get increasingly challenging if the codebase was written more than a few years ago and isn't actively maintained. And while it's possible to ## React v16.13.0 DevFeed: [React v16.13.0]() Original publisher: [Read original article]() Published: 2020-02-26T00:00:00Z Content type: release Language: en Sources: [React]() Topics: [React](), [CSS](), [Babel]() Tags: [bugfixes](), [bugs](), [deprecated](), [react](), [release](), [updates]() ### AI overview React 16.13.0 is released with bug fixes and new development warnings. The release warns about state updates during another component's render, conflicting CSS shorthand and longhand rules, deprecated string refs, and the legacy React.createFactory helper. ### Source excerpt This blog site has been archived. Go to react.dev/blog to see the recent posts. Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release. New Warnings Warnings for some updates during render A React component should not cause side effects in other components during rendering. It is supported to call setState during render, but only for the same component. If you call setState during a render on a different component, you will now see a warning: Warning: Cannot update a component from inside the function body of a different component. This warning will help you find application bugs caused by unintentional state changes. In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the setState call into useEffect. Warnings for conflicting style rules When dynamically applying a style that contains longhand and shorthand versions of CSS properties, particular combinations of updates can cause inconsistent styling. For example:
...
You might expect this
to always have a red background, no matter the value of toggle. However, on alternating the value of toggle between true and false, the background color start as red, then alternates between transparent and blue, as you can see in this demo. React now detects conflicting style rules and logs a warning. To fix the issue, don't mix shorthand and longhand versions of the same CSS property in the style prop. Warnings for some deprecated string refs String Refs is an old legacy API which is discouraged and is going to be deprecated in the future: