Performance issue - showing/hiding hierachical data with aggregated values

Hi there.

I’m displaying a hierachical psuedo-table - with drill down. The raw data is at the lowest level of the hierarchy. The parent levels are calculated using filters and reduce.

This works fine for 500 rows of data - but we have a user who has 3000 rows of data and the lag between exanding a level of the screen updating is about 6 seconds.

Things I’ve done - the object storing the data is frozen.

Here’s a mock-up of the page (display) and object (data) structure


Each of the aggregate values is being re-calculated with each expand or collapse.

What strategies can I employ with this to improve performance? Can I cache previous results?
Does vue create new objects when methods filter and these are reactive?
Is reduce worse than a simple for-in?

Hard to say how to improve anything without seeing any code, but basically if your whole table is re-rendering on each change then it’s no wonder there are perf issues with 3k+ rows.

Ideally you only want to re-render the part of the table that needs updating. This means making use of components so that you can pass them props to limit their need to re-render.

Another approach can be to virtualize your table so that only what’s within the viewport is displayed and rendered.