What’s new in the React JavaScript UI library

Now available in production release, Version 16.8 of the React JavaScript UI library has the hooks capability, for using state and other React features without having to write a class.

Where to download React

You can download the producton version of React from GitHub.

Current version: New features in React 16.8

Released in February 2019, React 168 provides an implementation of hooks for React’s DOM, DOM server, test renderer, and shallow renderer. Hooks are supported in React DevTools. Developers can build their own hooks to share reusable stateful logic among components. But Facebook advises developers to take their time with this capability, not recommending that developers rewrite applications to use hooks “overnight.”

There are no plans to remove classes from React, so developers should try hooks in some new components. Code usingeveraging hooks will work alongside existing code using classes.

Previous version: New features in React 16.7

Released in December 2018, React 16.7 adds the hooks capability, for using state and other React features without writing a class.

Hooks are functions that that link to React state and life-cycle features from function components. They currently work side by side with existing code, enabling gradual adoption. There are no plans to actually remove classes from React. Hooks solve a variety problems in React including:

• The lack of a way to attach reusable behavior to a component. There have been patterns such as render props and higher-order components that try to solve this, but these require restructuring of components, which can be cumbersome and make it harder to follow code. Using hooks, developers can extract stateful logic from a component for independent testing and reuse.
• Complex components have become too difficult to understand. With hooks, components can be split into smaller functions based on related pieces, such as setting up a subscription or fetching data. This is done instead of forcing a split based on life-cycle methods.
• Classes can confuse both people and machines and are seen as the biggest barrier to learning React. Hooks let developers use more of React’s features without classes. Hooks embrace functions, but without sacrificing the spirit of React. Access is provided to imperative escape hatches. Developers do not have to learn complex functional or reactive programming techniques.

Previous version: New features in React 16.6

Released in October 2018, React 16.6 provides several enhancements.

• With memo, developers can bail out from rendering with function components, similar to how class components can bail from rendering when input props are the same using PureComponents or shouldComponentUpdate.
• With lazy, developers can use the Suspense component for code-splitting by wrapping a dynamic import in call to React.lazy(). Note: The feature is not yet available for server-side rendering.
• The convenience API was introduced to consume a context value from within a class component. Developers had complained that adopting the new render prop API from React 16.3 could be difficult in class components.
• An error method, getDerivedStatefromError(), renders the fallback UI before a render completes. Note: It is not yet available for server-side rendering, but developers can start to prepare for it.
• Two Strictmode APIs have been deprecated: findDOMNode() and legacy context using contextType and getChildContext. Developers are encouraged to upgrade to the new contextType API.

Previous version: New features in React 16.4

Version 16.4 of React, released in late May 2018, adds support for pointer events, an often-requested feature, as well as an improvement for an upcoming asynchronous rendering capability. Browsers that support pointer events include versions of Google Chrome, Mozilla Firefox, Microsoft Edge, and Microsoft Internet Explorer.

Pointer events are DOM events fired for a pointing device, designed to provide a single event model to handle devices such as a mouse or touch.

With the support for pointer events, React adds support for event types that include:

• onPointerDow
• onPointerMove
• onPointerUp
• onPointerCancel
• onGotPointerCapture
• onLostPointerCapture
• onPointerEnter
• onPointerLeave
• onPointerOver
• onPointerOut

Other new capabilities in React 16.4 include:

• Improved compatibility with a planned asynchronous rendering mode. To do this, the release features a bug fix for getDerivedStatefromProps, which is now called every time a component is needed regardless of why the update is happening. It had only been called if a component was rerendered by a parent and would not fire as a result of a local setState. The fix does not affect most apps but, in rare instances, could cause issues with a small number of components.
• An experimental profiler component has been added, called unstable_Profiler, for measuring performance.
• An experimental reconciler, for creating custom renderers, features a new host config shape that is flat and does not use nested objects.
• Fixes to the React DOM include repairing a bug that prevented context propagation in some cases, as well as a situation in which some attributes were incorrectly getting removed from custom element nodes.

The experimental call return capability was deleted in React Version 16.4 because it affected bundle size and the API was not good enough. Expect it back at some point in another form, Facebook says.

Previous version: New features in React 16.3

The March 2018 Version 16.3 release of React brings life cycle changes as well as an API for context.

Life cycle changes in React 16.3

For the component life cycle, the upcoming async rendering mode stretches the class component API model, which is being used in ways that were not originally intended. So, new life cycles are being added, including getDerivedStateFromProps, as a safer alternative to the legacy life cycle, componentWillReceiveProps. Also added is getSnapshotBeforeUpdate, to support the safe reading of properties, such the DOM before updates are made.

React 16.3 also adds the “unsafe” prefix to some of these life cycles, such as to componentWillMount and componentWillReceiveUpdate. In these instances, “unsafe” does not refer to security but to the fact that code using these life cycles is more likely to have bugs in future versions of React.

With the React 16.3 release, developers do not have to do anything about legacy methods. The release is intended to prompt open source project maintainers to update their libraries ahead of deprecation warnings, which will not be enabled until a future release in the 16.x line.

Version 16.3 adds the StrictMode component, which identifies components with unsafe life cycles. StrictMode, which runs in development mode only, also warns about legacy string ref API usage and detects unexpected side effects. It activates additional checks for descendants. More functionality will be added later.

Context API supports static type checking and deep updates

The new context API, supports static type checking and deep updates. This API also is more efficient than the previous experimental API version, said Brian Vaughn, a member of the React JS core team at Facebook. Context lets data be passed through a component tree without needing to manually pass props, some of which include locale preference and UI theme. The old API will continue to work for React 16.x releases, giving users time to migrate.

Also new in React 16.3:

• An improved API, called createrefAPI, for managing refs, which provide a way to access DOM nodes or React elements developed in the render method.
• The forwardRef API, helping with the use of higher-order components that promote code reuse.

Previous version: New features in React 16.2

The November 2017 release of React 16.2 brings the fragments capability to improve support for showing multiple children from a component render method. Fragments, which resemble empty JSX tags, let developers group a list of children without adding nodes to the DOM.

You can install Version 16.2 from the NPM registry. To install with the Yarn package manager, run yarn add react@^16.2.0 react-dom@^16.2.0. To install it with NPM, run npm install --save react@^16.2.0 react-dom@^16.2.0.

Previous version: New features in React 16.0

Dubbed “React Fiber” during its development, September 2017’s React 16.0 is a rewrite of the React core, improving perceived responsiveness for complex applications via a new reconciliation algorithm. Key features of React 16 include:

• Errors that feature a component stack trace to make them easier to debug.
• Returning of strings/arrays directly from component render methods.
• A new faster, streaming server-side renderer.
• More native-like application performance.
• The shift from the controversial BSD + Patents license to the more-palatable MIT license.

Although React’s internals have been completely rewritten in React 16, the public API is “essentially unchanged,” said Sophie Alpert, Facebook’s engineering manager for React. The intent was to save developers from having to rewrite existing components built with React.

React 16’s new code was written alongside old code in the GitHub repo, as per a familiar practice at Facebook. Switches between the two were done with the Boolean useFiber feature flag. The process let Facebook start building its new implementation without affecting existing users and continue to make bug fixes to the old code base.

After a few months of ironing out bugs, Facebook opted to deliver a single product to reduce the possible set of bugs, rather than keep two versions of React current.