New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
When a form contains ArrayInput with large entries. It takes more than a minute for a form to be submitted. #9783
Comments
Thanks for submitting this issue. I confirm form submission is slow when there are many items in the ArrayInput, however I don't observe such drastic slowdowns. Capture.video.2024-04-19.11.22.24.mp4Besides, I also ran a profiling using Chrome DevTools, but I see no calls to I also ran a React DevTools profiling, which shows that the various However, since the problem is, according to my tests, less critical than what your description leads to believe, and we do not have such a use-case on our projects at the moment, I can't guarantee we will fix this issue soon. Any help diagnosing and fixing these slowdowns is welcome in the meantime. |
Hello @slax57, Thank you for having a look. Somehow, it works fine in Stackblitz for me too, there's not much lag. The issue does not appear to be reproducible in Stackblitz. However, when the application is running locally, or when it is deployed, there is a significant lag. The same behaviour is also observed in our application. if possible, Can you please try again running on the local machine instead of Stackblitz? The delay will be reproduced and you can observe the PS:- Are there any suggestions or workarounds that can be employed until the problem is resolved? |
Locking react-admin and related packages to below versions fixed the slow down for me (~30s of JS runtime down to <1s for an ArrayInput of ~10 objects).
I suspect the problem is between react-admin and react-hook-form (possibly with material UI?) |
Thank you for this additional information. Could you also specify what versions you had before? |
What you were expecting:
The submission of the form with ArrayInput large entries should be fast.
What happened instead:
It takes more than a minute to submit a form and the page becomes unresponsive in between.
React.Admin.-.ArrayInput.Bug.compressed.mp4
Steps to reproduce:
Sample Example v4 Try running this project locally. somehow it works fine in Stackblitz but it's getting reproduced locally as well as in our application.
Once it's running locally follow these steps to reproduce.
Other information:
I performed a performance profiling on this event from dev-tool. As we can see there's lot of scripting happened after submitting the form. The performance profiler results show that one function named
executeBuiltInValidation
from react-hook-form gets executed many times.Profiler.results.mp4
Similarly in our application when I performed the profiling. It took a long time to submit the form as
executeBuiltInValidation
task takes a long time to execute.related issue:- #8949
Environment
The text was updated successfully, but these errors were encountered: