React-spring: useTransition is not interpolating to correct final value

[sjnonweb]

🐛 Bug Report

The title is pretty much self explanatory. The final value is always off by a small margin.
Another interesting thing as pointed by @meesvandongen is triggering re-render makes it go to correct value.

To Reproduce

https://codesandbox.io/s/6z9kn5p1zw

Expected behavior

Interpolate to correct final value

Link to repro (highly encouraged)

https://codesandbox.io/s/6z9kn5p1zw

Environment

• react-spring v8.0.19
• react v16.8.6

[aleclarson]

This might be fixed by #632. Can you give it a try with the v9 branch?

git clone https://github.com/react-spring/react-spring.git --branch v9 --depth 1
cd ./react-spring
yarn
cd ./dist && yarn link

# In your repro directory:
yarn link react-spring

[sjnonweb]

linking to this branch causes a run time error:
Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)

This is the repo: https://codesandbox.io/s/6z9kn5p1zw

Stack trace:

Uncaught Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
    at invariant (http://localhost:3000/static/js/0.chunk.js:385:19)
    at resolveDispatcher (http://localhost:3000/static/js/0.chunk.js:1770:32)
    at useState (http://localhost:3000/static/js/0.chunk.js:1794:24)
    at useForceUpdate (http://localhost:3000/static/js/main.chunk.js:111:74)
    at useTransition (http://localhost:3000/static/js/main.chunk.js:1887:21)
    at App (http://localhost:3000/static/js/main.chunk.js:2817:87)
    at renderWithHooks (http://localhost:3000/static/js/0.chunk.js:21053:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/0.chunk.js:23209:17)
    at beginWork (http://localhost:3000/static/js/0.chunk.js:23844:20)
    at performUnitOfWork (http://localhost:3000/static/js/0.chunk.js:27888:16)
    at workLoop (http://localhost:3000/static/js/0.chunk.js:27929:28)
    at renderRoot (http://localhost:3000/static/js/0.chunk.js:28009:11)
    at performWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:28966:11)
    at performWork (http://localhost:3000/static/js/0.chunk.js:28876:11)
    at performSyncWork (http://localhost:3000/static/js/0.chunk.js:28850:7)
    at requestWork (http://localhost:3000/static/js/0.chunk.js:28705:9)
    at scheduleWork (http://localhost:3000/static/js/0.chunk.js:28518:9)
    at scheduleRootUpdate (http://localhost:3000/static/js/0.chunk.js:29213:7)
    at updateContainerAtExpirationTime (http://localhost:3000/static/js/0.chunk.js:29239:14)
    at updateContainer (http://localhost:3000/static/js/0.chunk.js:29307:14)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (http://localhost:3000/static/js/0.chunk.js:29620:7)
    at http://localhost:3000/static/js/0.chunk.js:29772:18
    at unbatchedUpdates (http://localhost:3000/static/js/0.chunk.js:29095:14)
    at legacyRenderSubtreeIntoContainer (http://localhost:3000/static/js/0.chunk.js:29768:9)
    at Object.render (http://localhost:3000/static/js/0.chunk.js:29843:16)
    at Module../src/index.js (http://localhost:3000/static/js/main.chunk.js:2879:50)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:782:30)
    at fn (http://localhost:3000/static/js/bundle.js:150:20)
    at Object.0 (http://localhost:3000/static/js/main.chunk.js:2952:18)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:782:30)
    at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23)
    at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19)
    at http://localhost:3000/static/js/main.chunk.js:1:57

[aleclarson]

That error often occurs when two React versions exist in the same bundle. To save you the trouble, I'll check this out today. 👍

[aleclarson]

This is fixed by #632

[sjnonweb]

Thanks man!

About the error above: I did go to dist before linking the package yet i got that error, also on doing npm ls i only get one version of react, not sure what i did different. Anyways thanks a lot for the help. keep up the good work.

[aleclarson]

You need to eject CRA and change some Webpack config to get it working. 😵

[sjnonweb]

ahh right!

[aleclarson]

You can use v9 like this now: yarn add react-spring@next