I have set up a very simple project sticking pretty much completely to Create a JSON Forms App - JSON Forms. 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 : react-jsonschema-form playground . 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
Hi @maxj(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: https://spectrum.chat/jsonforms/general/performance-issue-lag-happening-on-typing~c2b961a2-988f-4ac3-ab89-02c70cb53f81https://spectrum.chat/jsonforms/general/performance-issue-lag-happening-on-typing~c2b961a2-988f-4ac3-ab89-02c70cb53f81
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 : react-jsonschema-form playground . 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.
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?
Hi @maxj(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?
