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.
If I change one of the
styles I pass to<Motion>without using aspring, 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/6y1rwr6nz3Yes, I can work around this with a proper
shouldComponentUpdateon 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
stylepassed to<Motion>once. Thus<Motion>should only re-render once, but it actually re-renders twice: once unnecessarily with the previousstyle, then once with the newstyle.Motion.componentWillReceivePropsshould check ifnextProps.stylehas anysprings in it, and if not, it should immediately setstate.currentStyletonextProps.styleinstead of callingstartAnimationIfNecessary, 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 ofsprings for the time range in thestyle, and (because of this bug) it performs noticeably worse because it's rendering twice as much as necessary.