react.dev/content/blog/2018-05-23-react-v-16-4.md

title	author
React v16.4.0: Experimental Component Profiler and Bugfixes	[acdlite bvaughn]

React 16.4 is a minor release that includes an experimental component profiler, as well as a crucial bugfix for getDerivedStateFromProps.

React.unstable_Profiler

TODO (@bvaughn)

Bugfix for getDerivedStateFromProps

getDerivedStateFromProps is now called every time a component is rendered, regardless of the cause of the update. Previously, it was only called if the component was re-rendered by its parent; it would not fire as the result of a local setState. This was an oversight in the initial implementation that has now been corrected. The previous behavior was more similar to how componentWillReceiveProps works, but the improved behavior ensures compatibility with React's upcoming asynchronous rendering mode.

Most likely, this doesn't require any changes to your components. The rare cases where it does matter fall into one of two categories:

Avoid Side Effects in getDerivedStateFromProps

Like the render method, getDerivedStateFromProps should be a pure function of props and state. You should move side-effectful code elsewhere. E.g. Flux dispatches typically belong inside the originating event handler; DOM mutations belong inside componentDidMount or componentDidUpdate.

Side effects in getDerivedStateFromProps were already disallowed, but since it now fires more often than it used to, the recent change may expose previously undiscovered bugs.

Compare Incoming Props to Previous Props When Computing Controlled Values

The following code assumes getDerivedStateFromProps only fires on prop changes. But since it now fires for state changes, too, local updates to the controlled value will be ignored, since the props version always overrides it.

static getDerivedStateFromProps(props, state) {
  if (props.value !== state.controlledValue) {
    return {
      // Props always win. Oops!
      controlledValue: props.value,
    };
  }
  return null;
}

You can change it to do this instead:

static getDerivedStateFromProps(props, state) {
  const prevProps = state.prevProps;
  // Compare incoming props to previous props
  const controlledValue =
    prevProps.value !== props.value
      ? props.value
      : state.controlledValue;
  return {
    // Store the previous props in state
    prevProps: props,
    controlledValue,
  };
}

Installation

React v16.4.0 is available on the npm registry.

To install React 16 with Yarn, run:

yarn add react@^16.4.0 react-dom@^16.4.0

To install React 16 with npm, run:

npm install --save react@^16.4.0 react-dom@^16.4.0

We also provide UMD builds of React via a CDN:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Refer to the documentation for detailed installation instructions.

Changelog

React

• Add a new experimental React.unstable_Profiler component for measuring performance. (@bvaughn in #12745)

React DOM

• Add support for the Pointer Events specification. (@philipp-spiess in #12507)
• Properly call getDerivedStateFromProps() regardless of the reason for re-rendering. (@acdlite in #12600 and #12802)
• Fix a bug that prevented context propagation in some cases. (@gaearon in #12708)
• Fix re-rendering of components using forwardRef() on a deeper setState(). (@gaearon in #12690)
• Fix some attributes incorrectly getting removed from custom element nodes. (@airamrguez in #12702)
• Fix context providers to not bail out on children if there's a legacy context provider above. (@gaearon in #12586)
• Add the ability to specify propTypes on a context provider component. (@nicolevy in #12658)
• Fix a false positive warning when using react-lifecycles-compat in <StrictMode>. (@bvaughn in #12644)
• Warn when the forwardRef() render function has propTypes or defaultProps. (@bvaughn in #12644)
• Improve how forwardRef() and context consumers are displayed in the component stack. (@sophiebits in #12777)
• Change internal event names. This can break third-party packages that rely on React internals in unsupported ways. (@philipp-spiess in #12629)

React Test Renderer

• Fix the getDerivedStateFromProps() support to match the new React DOM behavior. (@koba04 in #12676)
• Fix a testInstance.parent crash when the parent is a fragment or another special node. (@gaearon in #12813)
• forwardRef() components are now discoverable by the test renderer traversal methods. (@gaearon in #12725)
• Shallow renderer now ignores setState() updaters that return null or undefined. (@koba04 in #12756)

React ART

• Fix reading context provided from the tree managed by React DOM. (@acdlite in #12779)

React Call Return (Experimental)

• This experiment was deleted because it was affecting the bundle size and the API wasn't good enough. It's likely to come back in the future in some other form. (@gaearon in #12820)

React Reconciler (Experimental)

• The new host config shape is flat and doesn't use nested objects. (@gaearon in #12792)