Performance issue when using LayoutGrid with Live validation

[puco]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

6.0.0-beta.20

Current Behavior

We observed this issue with our implementation of rjsf but were able to reproduce it also on current playground version. When in playground using the "Layout Grid" sample with "Live validation" turned on, after couple of edits (e.g. writing approx 30 characters in various fields) the whole form/page becomes unresponsive. Each change (writing into text field, toggling a checkbox) takes more than a second.

Expected Behavior

The performance should not degrade.

Steps To Reproduce

1. In Firefox:
2. Open playground, choose "Layout Grid" and switch on "Live validation"
3. Write 1234567890 into First Name using keyboard
4. Write 1234567890 into Middle Name
5. Write 1234567890 into Last Name
6. Write 1234567890 into AddressExpected: The form should update quickly
   Actual: Every keypress is reflected in the Input and Data after ~1s

Environment

- OS: Windows 11
- Browser: Firefox, Chrome

Anything else?

I think this is tied to Layout Grid. Even without Live validation there is stuttering when data is changed quickly. In Chrome the issue is less noticeable but the performance still degrades.

[heath-freenome]

@puco thanks for finding this... Seems like it may be time to convert more of our core components to stateless functional components. Also, there is a new experimental feature which MIGHT help improve performance a bit.

[nickgros]

57cad7d is the first bad commit which was in #4785

[puco]

@puco thanks for finding this... Seems like it may be time to convert more of our core components to stateless functional components. Also, there is a new experimental feature which MIGHT help improve performance a bit.

Unfortunately not for our use case. We still see the degradation with our forms with any of the options

57cad7d is the first bad commit which was in #4785

Are you sure? Our project was running beta.11 when we first observed the issue.

[heath-freenome]

@puco thanks for finding this... Seems like it may be time to convert more of our core components to stateless functional components. Also, there is a new experimental feature which MIGHT help improve performance a bit.

Unfortunately not for our use case. We still see the degradation with our forms with any of the options

Dang, that sucks. I've had a few ideas on how we can improve performance around this, along with fixing the overall issue (hopefully). Stay tuned for fixes coming in the next week or so.

57cad7d is the first bad commit which was in #4785

Are you sure? Our project was running beta.11 when we first observed the issue.

Yikes, I wonder when did you start using it? Was it always there or did we do something in beta.11 to start the problem and just made it worse lately