Performance issue, adding spinner while validating

[Nostalginen]

Version Number

7.51.5 (latest)

The Code

https://stackblitz.com/edit/chakra-ui-react-hook-form-demo?file=src%2Fcomponents%2FForm.tsx

Steps to reproduce

Click Submit button

The problem

In my real project i have somewhat same size form as in this example, 20+ inputs, mostly uncontrolled and UI done with Chakra. The problem that i'm facing is that when i submit the form and the validation starts, it takes several seconds to validate the fields and sometimes it seems like the UI is frozen and unresponsive. If you check the console of the example, you can see that every field is re-rendered multiple times, is this the correct behaviour? I've also tried to show a spinner while the validation process is ongoing, but the isValidating state is changed on every input validate, so it wont stay true for the whole validation process. Thank you in advance.

Screen.Recording.2024-05-29.at.22.26.21.mov

[Phibee]

Hi @Nostalginen,

Here's the better day to do it.
https://stackblitz.com/edit/chakra-ui-react-hook-form-demo-spr2eh

Things to note:

1. Consider make use of React Hook Form's Controller coz I personally don't prefer using the usual UseForm' register. as it is getting messy.
   https://react-hook-form.com/docs/usecontroller/controller
2. Consider integrating and make use of Yup or Zod Resolver to be use in React Hook UseForm resolver for better validations.
   https://react-hook-form.com/advanced-usage
3. Since you're using Chakra UI, better to use Chakra's NumberInput component for numeric values separated from the usual text input.
   https://v2.chakra-ui.com/docs/components/number-input

[Nostalginen]

Thank you @Phibee seems like the Controller works much better than the register. 💯