chenglou / chenglou/react-motion

<Motion> renders twice for every single unanimated style change

Open
#537 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.