React v16.4.0: Pointer Events

The latest minor release adds support for a frequently requested feature - pointer events !

Also, it includes fixes for the getDerivedStateFromProps method. A full list of changes is available below.

Pointer Events

The following event types have appeared in the React DOM:

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

Please note that these events will only work in browsers that support the specification of pointer events . (At the time of this writing, these browsers include Chrome, Firefox, Edge, and Internet Explorer.) If your application depends on pointer events, we recommend using a third-party polifil. It was decided not to include the polyfill in the React DOM, so as not to increase the size of the final bundle.

We recommend to look at this example on CodeSandbox .

Thank you so much to a man named Philipp Spiess for working on this change!

getDerivedStateFromProps

getDerivedStateFromProps now called every time the component is getDerivedStateFromProps , regardless of the reason for its change. Before that, it was called only when the component was redrawn by its parent and did not work when the component's setState called. This was the omission of the original implementation of the method, and it is now fixed. The previous behavior was more similar to componentWillReceiveProps , but in its improved state it is compatible with the asynchronous rendering mode, which will soon appear in React.

This fix will not affect most applications , but may cause problems for a small fraction of the components. Those rare occasions when this can happen fall into one of two categories:

1. Avoid side effects in getDerivedStateFromProps
   Like the render method, getDerivedStateFromProps should be a pure function that works only with props and state. Side effects were never supported in getDerivedStateFromProps , but since it now works more often than before, this change can reveal previously undetected bugs.
   The code with side effects should be transferred to other methods: for example, calls to Flux events should be directly in the event handler, and DOM manipulations should be made in componentDidMount or componentDidUpdate . Read our recent article on asynchronous rendering preparation .
2. Compare new props with previous ones when calculating monitored values
   The following piece of code assumes that getDerivedStateFromProps called when the prots change:

 static getDerivedStateFromProps(props, state) { if (props.value !== state.controlledValue) { return { //         ,  , //  controlledValue  setState  ,         . -! controlledValue: props.value, }; } return null; } 

One possible solution is to compare the new value with the previous one, keeping the previous one in the state:

 static getDerivedStateFromProps(props, state) { const prevProps = state.prevProps; //      const controlledValue = prevProps.value !== props.value ? props.value : state.controlledValue; return { //      prevProps: props, controlledValue, }; } 

However, try to avoid mixing the props and the state in this way - it is quite rare that the state should duplicate the value of the props, and this practice can lead to implicit bugs. It is desirable to have a single correct source for any value and, if possible, transfer the connection to the higher component for use in other components. Most of the use cases of getDerivedStateFromProps (and its predecessor componentWillReceiveProps ) are solved by transferring the control of sosotyanie to the parent component.

It is important to remember that most components do not require getDerivedStateFromProps . It was not intended to be an exact replacement for componentWillReceiveProps . In the coming weeks we will post a post with recommendations on how to use (and not use) getDerivedStateFromProps .

Full list of changes ( Changelog )

PS If you would like to see some kind of translation from the world of React, write in a personal or telegram / vk