When a form contains ArrayInput with large entries. It takes more than a minute for a form to be submitted.

[vardhanshahpirimid]

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.

1. Go to Posts resource.
2. Edit the first entry and submit the form.

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

• React-admin version: 4.10.6
• React version: 17.0.0
• Browser: Chrome

[slax57]

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.
Using the provided sandbox, performing the same action, on my computer the form submission only takes about 10 seconds.
I am running this on a 5 yo laptop.
See proof video below.

Capture.video.2024-04-19.11.22.24.mp4

Besides, I also ran a profiling using Chrome DevTools, but I see no calls to executeBuiltInValidation.

I also ran a React DevTools profiling, which shows that the various TextInput components seem to be rerendered way too many times (approx. 236 rerenders at submission), which is certainly an issue.

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.

[vardhanshahpirimid]

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 executeBuiltInValidation in the profiler too.

PS:- Are there any suggestions or workarounds that can be employed until the problem is resolved?