Skip to content

useTransition is not interpolating to correct final value #633

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sjnonweb opened this issue Apr 11, 2019 · 8 comments
Closed

useTransition is not interpolating to correct final value #633

sjnonweb opened this issue Apr 11, 2019 · 8 comments
Labels
kind: bug Something isn't working
Milestone

Comments

@sjnonweb
Copy link

🐛 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
@sjnonweb sjnonweb added the kind: bug Something isn't working label Apr 11, 2019
@aleclarson
Copy link
Contributor

aleclarson commented Apr 14, 2019

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

@aleclarson aleclarson mentioned this issue Apr 15, 2019
5 tasks
@sjnonweb
Copy link
Author

sjnonweb commented Apr 15, 2019

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
Copy link
Contributor

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
Copy link
Contributor

This is fixed by #632

@sjnonweb
Copy link
Author

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
Copy link
Contributor

aleclarson commented Apr 15, 2019

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

@sjnonweb
Copy link
Author

ahh right!

@aleclarson
Copy link
Contributor

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

@aleclarson aleclarson added this to the v9.0.0 milestone Apr 23, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
kind: bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants