FormidableLabs / FormidableLabs/victory
Components flashing and re-rendering when `animate` is set to true
- Dominant language
- TypeScript
- Stars
- 11.2k
- Forks
- 536
- PR merge metrics
- No merged PRs in 30d
Description
Setting the `animation` prop to `true` impacts the performance of a component even when it is not actively animating.
If I enable paint flashing in the Chrome dev tools to show which parts of the chart are re-painting, there is a big difference between a chart where `animate` is set to false vs. a chart where `animate` is set to true.
With animation:

Without animation:

In the second example, only the tooltip is re-rendering, as expected. In the first, there is some visible flashing in the axis labels, as they are re-rendering along with a lot of the data as the tooltip moves.
Steps to reproduce:
1.[Enable Paint flashing in the chrome dev tools](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#paint-flashing)
2. Compare the stacked bar chart performance of https://victory-testing-dashboard.netlify.app/?animate=true vs https://victory-testing-dashboard.netlify.app/
Related issues: #1993
Contributor guide
Assessment
This issue has not been assessed yet.