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

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

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

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 relea

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, b

These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach modern React and include live examples: Manipulating the DOM with Refs forwardRef Ref forwarding is a technique for automatically passing a ref through a component to one of its children. This is typically not necessary for most components in the application. However, it can be usef

At React Conf 2019 we announced an experimental release of React that supports Concurrent Mode and Suspense. In this post we’ll introduce best practices for using them that we’ve identified through the process of building the new facebook.com. This post will be most relevant to people working on data fetching libraries for React. It shows how to best integrate them with Concurrent Mode and Suspens

We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge! What’s changed? A lot has changed in version 4! At a high level, this new version should offer significant performance gains and an improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects. Visit the interactive tuto

Common testing patterns for React components. Note: This page assumes you’re using Jest as a test runner. If you use a different test runner, you may need to adjust the API, but the overall shape of the solution will likely be the same. Read more details on setting up a testing environment on the Testing Environments page. On this page, we will primarily use function components. However, these tes

These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach modern React: <Profiler> The Profiler measures how often a React application renders and what the “cost” of rendering is. Its purpose is to help identify parts of an application that are slow and may benefit from optimizations such as memoization. Note: Profiling adds some additiona

This blog site has been archived. Go to react.dev/blog to see the recent posts. Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release. New Deprecations Renaming Unsafe Lifecycle Methods Over a year ago, we announced that unsafe lifecycle methods are getting renamed: componentWillMount → UNSAFE_componen

This blog site has been archived. Go to react.dev/blog to see the recent posts. Our latest release includes an important performance bugfix for React.lazy. Although there are no API changes, we’re releasing it as a minor instead of a patch. Why Is This Bugfix a Minor Instead of a Patch? React follows semantic versioning. Typically, this means that we use patch versions for bugfixes, and minors for

This blog site has been archived. Go to react.dev/blog to see the recent posts. You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React. An Update from August, 2019 You can find an update to this roadm

These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach React with Hooks: Quick Start Tutorial react: Hooks Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks are backwards-compatible. This page provides an overview of Hooks for experienced React users. This is a fast-pa

These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach modern React: react: Hooks Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. This page describes the APIs for the built-in Hooks in React. If you’re new to Hooks, you might want to check out the overview first. You may a

These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach React with Hooks: Quick Start Tutorial react: Hooks Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count

This blog site has been archived. Go to react.dev/blog to see the recent posts. Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components. Check out the full changelog below. React.memo Class components can bail out f

This blog site has been archived. Go to react.dev/blog to see the recent posts. Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update. While React itself doesn’t require any build dependencies, it can be challenging to write a complex app without a fast test runner, a production minifier, and a modular codebase. Since the very firs

This blog site has been archived. Go to react.dev/blog to see the recent posts. React 16.4 included a bugfix for getDerivedStateFromProps which caused some existing bugs in React components to reproduce more consistently. If this release exposed a case where your application was using an anti-pattern and didn’t work properly after the fix, we’re sorry for the churn. In this post, we will explain s

This blog site has been archived. Go to react.dev/blog to see the recent posts. The latest minor release adds support for an oft-requested feature: pointer events! It also includes a bugfix for getDerivedStateFromProps. Check out the full changelog below. Pointer Events The following event types are now available in React DOM: onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCap