Bug: incorrect `interpolatingStyle` value for `Motion` after `onRest`

Example: http://www.webpackbin.com/N16jKp-cz

import React, {PureComponent } from 'react';
import {render} from 'react-dom';
import {Motion, spring} from 'react-motion';

class App extends PureComponent {
  constructor(...args) {
    super(...args);
    
    this.state = {
      x: spring(10)
    }
    
    this.onRest = this.onRest.bind(this);
  }
    
  onRest() {
   // changing to a number value
    this.setState({
      x: 100
    });
  }
  
  render() {
    
    return (
      <Motion defaultStyle={{x: 0}} style={this.state} onRest={this.onRest}>
        {interpolatingStyle => {
          return (
            <div>
              {/* on final render this should be '100' but it is the last spring value: '10' */}
              interpolated x: {interpolatingStyle.x} <br/>
              {/* on final render this renders '100' as expected */}
              current x: {JSON.stringify(this.state.x)}
            </div>
          )
        }}
      </Motion>
    )
  }
}

render(<App />, document.getElementById('app'));

Workaround: put update on the end of the stack

onRest() {
    setTimeout(() => {
      this.setState({
        x: 100
      });
    });
  };

[nkbt]

Yeah setTimeout is necessary to use with onRest. I reckon this has something to do with async nature/batching of setState in React.

We can probably switch to setState(pureCallback) notation as now recommended. Hopefully it would eliminate the problem.

You may check https://github.com/nkbt/react-motion-loop with my workaround, which is the same…

[nkbt]

if you check source of react-collapse@3 you will find fairly ugly but working solution with instance vars. I had to figure out when animation ends properly and comparing with end values is not the right one, since spring can go into negative values in many cases.