Performance issues with large data

General
1

Hi @jsonforms team. I’m hoping someone can help me with some performance issues i’m having. I’m using a list with detail renderer to render a top level array in my schema and then letting JSON forms decide what renderers to use for all child objects of my top level array objects. When I select one of the objects from my listwithdetails renderer it can take a very long time to render all the child objects and then also interact with them when the data get’s large.

I’ve got an example of my application in a sandbox here: https://codesandbox.io/s/busy-sky-cndj3q?file=/src/App.tsx

In my actual application, I have a bunch of different tabs and in each of the tabs I have a separate JsonForms component which only displays a subsection of the overall data. In the sandbox I have just added the contents of a single tab.

Any recommendations greatly appreciated and thanks again for the great framework!

2

Hi @james-morris,

There are certainly improvements we could do to be a bit faster within JSON Forms but I think this is mainly a Material UI issue. It’s not the cheapest framework in terms of resources which is noticeable when rendering a large amount of Material UI components at the same time.

However there is certainly a very low hanging fruit which could help a lot in your case. Your UI consists almost solely out of Accordions. By default Material UI renders the whole content of these accordions, even when they are collapsed. This can be changed with a small configuration, see here for more information. Using the described configuration the UI renders instantly for me.

1 Like
3

Hi @sdirix,

As per usual, that was a great suggestion, it’s massively improved the performance. Thank you again for your help!