Skip to content
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

<Motion> renders twice for every single unanimated style change #537

Open
jedwards1211 opened this issue Apr 14, 2018 · 0 comments
Open

Comments

@jedwards1211
Copy link

jedwards1211 commented Apr 14, 2018

If I change one of the styles I pass to <Motion> without using a spring, it should only need to perform a single render. However, it always performs two renders in this case, as evinced by the following code: https://codesandbox.io/s/6y1rwr6nz3

Yes, I can work around this with a proper shouldComponentUpdate on my child component, but it happens to be quite a bit of extra work in my case, when <Motion> doesn't need to be double-rendering in the first case.

When you click the button, it changes the style passed to <Motion> once. Thus <Motion> should only re-render once, but it actually re-renders twice: once unnecessarily with the previous style, then once with the new style.

Motion.componentWillReceiveProps should check if nextProps.style has any springs in it, and if not, it should immediately set state.currentStyle to nextProps.style instead of calling startAnimationIfNecessary, so that it only performs a single render.

This is a fairly minor issue, but in my use case (plots animated by <Motion> that do some computationally intensive drawing), every ounce of performance counts. The time range of my plots is animated when the user clicks "Current Month", "Current Day", etc. range presets, and no redundant rendering occurs while animating, but when the user drags the plot, I use raw numbers instead of springs for the time range in the style, and (because of this bug) it performs noticeably worse because it's rendering twice as much as necessary.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant