Performance issue with several charts (regression in v0.73)

Describe/explain the bug When doing re-render (change of the input data) of the legend in the Bar chart, it’s extremely slow (several seconds). Waiting for: 'requestAnimationFrame' handler took <N>ms

This behavior is best spotted when you have bigger chart ~30 items.

When you do first render it’s super fast. Only on data change it’s slow. It happens only with Legend change, when you change the chart data (values) it’s still fast.

We have not tested any other charts than Bar Chart - as we don’t use them with big data.

We have view with 2 big charts - on data input change it takes ~5s for them to re-render.

To Reproduce Example code https://codesandbox.io/s/perfomrance-issue-16vsp?file=/src/index.tsx The only thing it does is randomize the legend values on button click.

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/perfomrance-issue-16vsp?file=/src/index.tsx
2. Open dev tools
3. Click on button “Click me”
4. Observe the long wait

Expected behavior The Chart is refreshed fast.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Google Chrome is up to date
• Version 92.0.4515.159 (Official Build) (64-bit)

Regression The chart works fast with version 0.72 the performance issue is introduced in version 0.73

[plouc]

I think I found the issue, now react-spring does not unmount components after a leave transition, we’ll have to configure the expires property to solve this.

[animalxxv]

Had the same issue on 0.79.1 for svg bar and scatterplots. I ended up switching to the canvas versions as the issue does not persist there (although you miss out on the nice transitions)

Just saw your comment after posting my comment… I can confirm the workaround works for me