question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onRest seems to cause React-Motion to ignore rerenders

See original GitHub issue

This onRest callback doesn’t work:

@autobind
handleRest() {
    this.setState(getNextTransitionState);
}

However, this one works as expected:

@autobind
handleRest() {
    window.setTimeout(() => {
        this.setState(getNextTransitionState);
    }, 0);
}

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:13 (3 by maintainers)

github_iconTop GitHub Comments

8reactions
ralexand56commented, Jul 11, 2017

This seems like a major bug and counter to the way you expect react to work by setting state leading to rerender. Is there plans to fix this?

4reactions
nkbtcommented, Aug 11, 2016

Actually right, deferring state change onRest makes animations lose momentum and causes delays. It is not quite awesome in some edge cases.

Here in example I need to go from RESIZE to REST and then to STABLE state. If I do not delay REST, next animation is blocked and container is not resized. If I do, then container is resized with a slight delay, which looks a bit odd

react-motion-loses-momentum

Read more comments on GitHub >

github_iconTop Results From Across the Web

css transitions ignored because react rerenders - Stack Overflow
I'm trying to use css transitions, but as react re-renders a component, they are getting ignored. Let's imagine the use case, ...
Read more >
A Comparison of Animation Technologies - CSS-Tricks
For this reason, ... Performance seems to be on track to being very good. ... React-Motion is pretty similar to game-based animation, ...
Read more >
stream-chat-react - UNPKG
node_modules/react-motion/lib/shouldStopAnimation.js",". ... No, otherwise accidental parent rerender causes cb trigger\n _this.
Read more >
formik - npm
Let's face it, forms are really verbose in React. To make matters worse, most form helpers do wayyyy too much magic and often...
Read more >
How to stop re-rendering lists in React? - Alex Sidorenko
Every time you update the property of one of the components in the list, the entire list re-renders. How to prevent that?
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found