menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

JSONForms

JSON Forms is a JSON Schema based approach for creating forms and comes with support for React, Angular and Vue. Support here is free, but might involve some delay in the replies based on our current workload for paying customers. We also offer PROFESSIONAL SUPPORT packages to get you started quickly with JSON Forms and to help you with any questions and technical difficulties for JSON Forms with guaranteed response time and in-depth technical solutions. For details please see our web page linked below.

Channels
Team

Very Bad Performance using materialRenderers.

January 27, 2021 at 7:34am

Very Bad Performance using materialRenderers.

January 27, 2021 at 7:34am
I have set up a very simple project sticking pretty much completely to https://jsonforms.io/docs/tutorial. I am experiencing some serious input delay on every keystroke.
What really confuses me is that I can find the same problem in this demo page : https://rjsf-team.github.io/react-jsonschema-form/ . For Example when I choose "Arrays" and "material-ui"I experience the same input delay as in my application. The Problem seems to increase linearly with the size of the schema.
Is this a known issue or even an intended behaviour? Are there any recomended workarounds?
I am happy to provide additional ressources to reproduce the issue (e.g. Stackblitz or alternatives) if that helps
Greetings, Max

January 27, 2021 at 9:59am
Hi (maxj), thanks for your interest in JSON Forms. The default material renderers are setup in a way that any change to any input immediately leads to an internal state update which in turn executes a complete validation over the whole form. This has the benefit of updating validation messages immediately while keeping the overall architecture simple and easy to reason about. The largest downside of this architecture is that when many updates are executed right after each other, especially when typing fast into a text input, the whole update process may take longer than each keystroke, leading to a bad user experience. However in our experience this is usually only the case for larger forms. See also this question and discussion:

Performance issue - lag happening on typing

message-simple
9
Note that there are many ways around this. For example you can register a custom renderer for text inputs which only updates the internal state on focus out (or after a short pause of key presses) and thereby avoids the worst performance cases. Alternatively you might want to pause or completely or partially disable the built-in validation and exchange it with your own solution, for example to speed up validation specialized for your use cases. As extensibility is one of the core features of JSON Forms you can almost implement any improvement you'd like.
Regarding your question: Did you setup your project with the recently released version 2.5.0? It contains a lot of performance improvements compared to 2.4.1, especially for the standalone React renderers.
Note that the demo page you linked
What really confuses me is that I can find the same problem in this demo page : https://rjsf-team.github.io/react-jsonschema-form/ . For Example when I choose "Arrays" and "material-ui"I experience the same input delay as in my application. The Problem seems to increase linearly with the size of the schema.
is built with jsonschema-form which is a completely different framework than JSON Forms without any shared code between them. Therefore performance observations in one framework doesn't allow any conclusions over the other framework.
Edited
like-fill
1
Thanks for the quick response. The Form that I am working with only has 8 fields and I am already experiencing some significant delay :-/ I will start looking into the topic of custom renderers. Is there any quick fix that I can do to get my application running well enough that I can have show it as a POC to customers?
Edited
Hi (maxj), could you please post your schema and uischema (or even the actual code) so I can potentially reproduce the issue? This should not happen on a form with 8 fields. Can you reproduce the problem with the current JSON Forms React seed?
I have put the relevant parts of the project into a stackblitz. https://react-ts-p3pfzd.stackblitz.io. Unfortunally it does not run because stackblitz runs into some dependencies issues. Anyway it contains all the code and the schema. The Schema I have there has 11 fields and the resulting application is just on the edge of being usable. The delays are allready pretty noticable when typing fast. I am not using a uischema at that point. Might that be an issue?
Sorry. The Link war wrong. Thats the right one: https://stackblitz.com/edit/react-ts-p3pfzd
like-fill
1
When I add your schema into our React seed the UI updates instantly even when typing in unreasonable fast speeds.
Did you also try to run our React seed and can you reproduce the problems there?
It seems like it is indeed a good bit faster, when used in the seed project instead of my minimalistic project. I will have to look into the reasons for that. The usecase that we want to use jsonforms for might bring the requirement to handle forms with 100+ fields. Do you think it will be possible, to achieve a descent responsiveness for forms of that size? Do you think a clever strategie for updating the state will bring big enough improvements? BTW: Thanks a lot for your lightning fast and super helpful answers :-)
You were lucky as we released a new version just yesterday and I wanted to make sure that we didn't publish some overlooked performance regression ;)
In general, yes, I'm convinced that this is possible. The best approach and how much effort it will require heavily depends on your exact use cases though. If you'd like us to spend some time with you to go over your requirements and recommend an approach you might want to consider purchasing a support package.
Of course feel free to still ask all questions you'd like for free in this forum, however I can't guarantee such fast responses every day ;)
like-fill
1