What’s new in React 16.3 JavaScript UI library

The Version 16.3 release of Facebook’s React JavaScript UI library brings life cycle changes as well as an API for context

What’s new in React 16 JavaScript UI library

React 16, the latest version of the popular JavaScript library for building UIs, was updated in late Maarch 2018 to Version 16.3.

Where to download React

You can download React 16 from the project’s GitHub page.

Current version: What’s new in React 16.3

The Version 16.3 release of Facebook’s React JavaScript UI library 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: What’s new in React Version 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.

Key new features of React 16

Dubbed “React Fiber” during its development, React 16 is a rewrite of the React core, improving perceived responsiveness for complex applications via a new reconciliation algorithm. The initial version of React 16 debuted on September 26, 2017.

Key features of React 16 include:

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.