The latest minor release adds support for an oft-requested feature: pointer events!
\nIt also includes a bugfix for getDerivedStateFromProps. Check out the full changelog below.
The following event types are now available in React DOM:
\nonPointerDownonPointerMoveonPointerUponPointerCancelonGotPointerCaptureonLostPointerCaptureonPointerEnteronPointerLeaveonPointerOveronPointerOutPlease note that these events will only work in browsers that support the Pointer 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.
\nCheck out this example on CodeSandbox.
\nHuge thanks to Philipp Spiess for contributing this change!
\ngetDerivedStateFromProps 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 local setState. This was an oversight in the initial implementation that has now been corrected. The previous behavior was more similar to componentWillReceiveProps, 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:
\ngetDerivedStateFromProps Like the render method, getDerivedStateFromProps should be a pure function of props and state. Side effects in getDerivedStateFromProps 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 about preparing for asynchronous rendering.
\nThe following code assumes getDerivedStateFromProps only fires on prop changes:
static getDerivedStateFromProps(props, state) {\n if (props.value !== state.controlledValue) {\n return {\n // Since this method fires on both props and state changes, local updates\n // to the controlled value will be ignored, because the props version\n // always overrides it. Oops!\n controlledValue: props.value,\n };\n }\n return null;\n}One possible way to fix this is to compare the incoming value to the previous value by storing the previous props in state:
\nstatic getDerivedStateFromProps(props, state) {\n const prevProps = state.prevProps || {};\n // Compare the incoming prop to previous prop\n const controlledValue =\n prevProps.value !== props.value\n ? props.value\n : state.controlledValue;\n return {\n // Store the previous props in state\n prevProps: props,\n controlledValue,\n };\n}However, code that “mirrors” props in state usually contains bugs, whether you use the newer getDerivedStateFromProps or the legacy componentWillReceiveProps. We published a follow-up blog post that explains these problems in more detail, and suggests simpler solutions that don’t involve getDerivedStateFromProps().
React v16.4.0 is available on the npm registry.
\nTo install React 16 with Yarn, run:
\nyarn add react@^16.4.0 react-dom@^16.4.0To install React 16 with npm, run:
\nnpm install --save react@^16.4.0 react-dom@^16.4.0We also provide UMD builds of React via a CDN:
\n<script crossorigin src=\"https://unpkg.com/react@16/umd/react.production.min.js\"></script>\n<script crossorigin src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\"></script>Refer to the documentation for detailed installation instructions.
\nReact.unstable_Profiler component for measuring performance. (@bvaughn in #12745)getDerivedStateFromProps() regardless of the reason for re-rendering. (@acdlite in #12600 and #12802)forwardRef() on a deeper setState(). (@gaearon in #12690)propTypes on a context provider component. (@nicolevy in #12658)react-lifecycles-compat in <StrictMode>. (@bvaughn in #12644)forwardRef() render function has propTypes or defaultProps. (@bvaughn in #12644)forwardRef() and context consumers are displayed in the component stack. (@sophiebits in #12777)getDerivedStateFromProps() support to match the new React DOM behavior. (@koba04 in #12676)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)setState() updaters that return null or undefined. (@koba04 in #12756)