chenglou / chenglou/react-motion
<Motion> renders twice for every single unanimated style change
- Dominant language
- JavaScript
- Stars
- 21.9k
- Forks
- 1.1k
- PR merge metrics
- No merged PRs in 30d
Description
If I change one of the `style`s I pass to `` 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 `` doesn't need to be double-rendering in the first case*.
When you click the button, it changes the `style` passed to `` once. Thus `` 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 `spring`s 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 `` 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 `spring`s 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.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in Motion.componentWillReceiveProps and reproduce the two-render behavior using the linked CodeSandbox, focusing on a style change with raw numbers rather than springs. Done means an unanimated style change renders once while spring-based animation behavior remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100