The latest minor release adds support for an oft-requested feature: pointer events!

It also includes a bugfix forgetDerivedStateFromProps. Check out the fullchangelog below.

Pointer Events

The following event types are now available in React DOM:

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

Please note that these events will only work in browsers that support thePointer Events specification. (At the time of this writing, this includes the latest versions of Chrome, Firefox, Edge, and Internet Explorer.) If your application depends on pointer events, we recommend using a third-party pointer events polyfill. We have opted not to include such a polyfill in React DOM, to avoid an increase in bundle size.

Check out this example on CodeSandbox.

Huge thanks toPhilipp Spiess for contributing this change!

Bugfix forgetDerivedStateFromProps

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, and would not fire as the result of a localsetState. This was an oversight in the initial implementation that has now been corrected. The previous behavior was more similar tocomponentWillReceiveProps, but the improved behavior ensures compatibility with React’s upcoming asynchronous rendering mode.

This bug fix will not affect most apps, but it may cause issues with a small fraction of components. The rare cases where it does matter fall into one of two categories:

1. Avoid Side Effects ingetDerivedStateFromProps

Like the render method,getDerivedStateFromProps should be a pure function of props and state. Side effects ingetDerivedStateFromProps were never supported, but since it now fires more often than it used to, the recent change may expose previously undiscovered bugs.

Side effectful code should be moved to other methods: for example, Flux dispatches typically belong inside the originating event handler, and manual DOM mutations belong inside componentDidMount or componentDidUpdate. You can read more about this in our recent post aboutpreparing for asynchronous rendering.

2. Compare Incoming Props to Previous Props When Computing Controlled Values

The following code assumesgetDerivedStateFromProps only fires on prop changes:

staticgetDerivedStateFromProps(props, state){if(props.value!== state.controlledValue){return{// Since this method fires on both props and state changes, local updates// to the controlled value will be ignored, because the props version// always overrides it. Oops!controlledValue: props.value,};}returnnull;}

One possible way to fix this is to compare the incoming value to the previous value by storing the previous props in state:

staticgetDerivedStateFromProps(props, state){const prevProps= state.prevProps||{};// Compare the incoming prop to previous propconst controlledValue=    prevProps.value!== props.value? props.value: state.controlledValue;return{// Store the previous props in stateprevProps: props,    controlledValue,};}

However,code that “mirrors” props in state usually contains bugs, whether you use the newergetDerivedStateFromProps or the legacycomponentWillReceiveProps. We published a follow-up blog post that explains these problems in more detail, and suggestssimpler solutions that don’t involvegetDerivedStateFromProps().

Installation

React v16.4.0 is available on the npm registry.

To install React 16 with Yarn, run:

yarnadd react@^16.4.0 react-dom@^16.4.0

To install React 16 with npm, run:

npminstall--save react@^16.4.0 react-dom@^16.4.0

We also provide UMD builds of React via a CDN:

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

Refer to the documentation fordetailed installation instructions.

Changelog

React

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

React DOM

• Add support for the Pointer Events specification. (@philipp-spiess in#12507)
• Properly callgetDerivedStateFromProps() 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 usingforwardRef() on a deepersetState(). (@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 specifypropTypes on a context provider component. (@nicolevy in#12658)
• Fix a false positive warning when usingreact-lifecycles-compat in<StrictMode>. (@bvaughn in#12644)
• Warn when theforwardRef() render function haspropTypes ordefaultProps. (@bvaughn in#12644)
• Improve howforwardRef() 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 thegetDerivedStateFromProps() support to match the new React DOM behavior. (@koba04 in#12676)
• Fix atestInstance.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 ignoressetState() updaters that returnnull orundefined. (@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)

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