I played with Json forms for few months now and could build a prototype of what I’d like to do really fast, so I will start with a big thanks for this library.
I am currently blocked with performance issue, that I reproduced starting from a react seed 3.1.0 today.
I have a simple array of objets with only 4 fields in it (no nesting). When I try with 400 rows , it takes more than 60seconds for initial display
Is there a “recommended” limit of rows for an array ? Just wanted to check if there is any optimization possible to avoid this result before trying to find workarounds (pagination, search …) ?
In our experience JSON Forms adds a bit of overhead for each field, however the actual time is spent rendering Material UI. Especially with the table renderer you will end up with 1600 inputs which will always be very slow when rendered using Material UI.
As a “quick fix” you can switch to the alternative layout style and disable pre-rendering of the collapsible sections. To switch to the alternative array style you can use detail: GENERATED, see here. For the pre-rendering disabling you can see here.
To instead improve rendering for the table you probably want to use some kind of table virtualization. You could use react-table and code the UI yourself or you might want to try the table solution of Material UI.
Quite late for a feedback, but when it works, it’s important to say so
Performances are really better with disabling pre-rendering. As I had already my own tag in my Customized Layout Renderer, I could add the TransitionProps={{ unmountOnExit: true }} param in it easily.
