nivo: 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:

Go to https://codesandbox.io/s/perfomrance-issue-16vsp?file=/src/index.tsx
Open dev tools
Click on button “Click me”
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

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 6
Comments: 32 (13 by maintainers)

Most upvoted comments

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.

plouc on Sep 7, 2021

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

animalxxv on Sep 29, 2022

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)

dgoemans on Jun 21, 2022

I’ve updated the example a little bit, to make sure the problem doesn’t come from top re-renders: https://codesandbox.io/s/perfomrance-issue-forked-018kh?file=/src/index.tsx, and it appears to only happen when the value of indexBy (bulletinName) is changed.

On a side note, nivo makes heavy use of hooks, so in your example when you’re doing this:

.map((field) => {
	field.bulletinName = (Math.random() + 1).toString(36).substring(5);
	return field;
})

You’re returning the same ref for each data point, which can lead to issues, but it’s not the cause of the perf issue.

plouc on Aug 27, 2021