chenglou / chenglou/react-motion

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

Open
#437 5 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
21.9k
Forks
1.1k
PR merge metrics
No merged PRs in 30d

Description

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

```js
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 (

{interpolatingStyle => {
return (


{/* on final render this should be '100' but it is the last spring value: '10' */}
interpolated x: {interpolatingStyle.x}

{/* on final render this renders '100' as expected */}
current x: {JSON.stringify(this.state.x)}

)
}}

)
}
}

render(, document.getElementById('app'));
```

Workaround: put update on the end of the stack

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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.