jsonforms
jsonforms copied to clipboard
eclipsesource
Performance Issues With Arrays
Describe the bug When a form contains arrays of objects performance is very poor.
To Reproduce
I have created a minimal reproduction. Simply clone the linked repo, run npm install and then run npm start.
To asses the performance, I use the Chrome developer tools. Since I have a beefy developer laptop, I go to the "Performance" tab of the dev tools, and select "4x slowdown" to throttle the CPU. On performant sites, that is not an issue. However, in the reproduction when you type quickly into one of the inputs there is a very long lag between when you hit a key and when it shows up. The lag makes the form almost unusable.
Expected behavior The form should be usable even on devices with a modest CPU.
Browser (please complete the following information):
- chrome
- Version 90.0.4430.212 (Official Build) (x86_64)
Used Setup (please complete the following information):
- react
- material
Additional context Using the React Profiler it looks like when the user types into an input all cells in the arrays re-render.
Hi @devinsm, thanks for the report! With our default renderers typing really fast is often a problem. The renderers are set up in a way that a full cycle is triggered on each key press: Update data -> Revalidate schema -> Potentially rerender whole form. Therefore we usually suggest to use a debouncing mechanism for text inputs. This would also increase performance for your example so low-powered devices should do fine.
Note that we're also looking into:
- Add the mentioned debounce mechanism to our default text input renderers
- Switch to an async validation process so the UI can react faster
Both of these will make your example much more performant in the future.
With that basic background out of the way, your observation is correct. Something fishy is going on with the array renderer. Your example is small enough that I usually would NOT expect the slowdowns mentioned above. Running the example one can easily see that the whole array is rerendered, although only one nested control is changed. This is obviously not what we want, all unrelated controls should abort their rerendering. There is probably something going wrong with our memoizing, which we need to investigate.
@sdirix Thank you for your quick and detailed response! Getting the memoization right can be a headache, so I totally understand.
We are observing the same issue with array rendering. We have 15 small arrays (3-5 entries each) within another array (just 1 entry right now), and on a Samsung tablet each button press takes almost 2, and sometimes 3 seconds to respond. Validations are disabled for the form.
@manmal thanks for the report! Just to confirm, you're on the latest stable or alpha release?
@manmal Are you still using JSON Forms and are you still experiencing this issue with the latest JSON Forms 3.0?
@sdirix We ended up splitting up the form over multiple separate forms because of this issue. That was an ok-ish workaround, but as a result, I unfortunately don't have a test case for this now. Sorry!
@manmal Thanks for the update. @LukasBoll please check the minimal reproduction in the first post, update to the latest JSON Forms and verify whether the reported performance problems are fixed.
I tested the example above on my laptop (with a i5-7200U processor): Without the „4x slowdown“ everything works fine. With the slowdown typing at “medium” speed works, but “fast” typing or holding down keys (e.g when holding Backspace) still leads to lags.
We further investigated on this issue. The introduced debounce mechanism works for arrays. The lag I experienced is independent from arrays and caused by re-rendering the text input field. The time needed for the re-rendering is mostly caused by the MUI-input field, JSON Forms only adds a small overhead.
I'll close this issue for now as some time has passed. Please feel free to reopen if the issue still occurs for you with some detailed information on how to reproduce it. Thanks!