issue: performance problems when I watch on a large number of forms

[bigbigbo]

Version Number

7.29.0

Codesandbox/Expo snack

https://codesandbox.io/s/happy-merkle-10wkfj?file=/src/App.js

Steps to reproduce

1. Hold Enter "123123123" into the input box
2. input content update is very solwly

Expected behaviour

I want to render a dynamic and a large number of forms, then I need watch on some form field change and setError other form field, setError is work but input content update is very solwly.

If I use registry with input, input is very smooth, but I need control form field. This performance problems occurred when I use Controler with antd inputcomponent.

How can I solve this performance problem when I use Controler with antd inputcomponent in this case?

What browsers are you seeing the problem on?

Chrome

Relevant log output

when I setError, the whole form field is rerender.

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

You can start optimizing your form by considering the use of uncontrolled Antd Input instead of controlled. It integrates well with the register form method.

Now, without knowing your actual use-case, there're many different things you can do to optimize the performance of your form. Consider searching though the discussions section of RHF repository for threads like #7611.

The main idea is to subscribe to values as deep down the React tree as possible where the information this info is relevant; make use of hooks like useWatch, useFormState, the getFieldState form method, instead of watching the form values and state (errors) at the root of your form. You can also look into the deps prop to provide the dependent fields names that are gonna be validated along with the input you define them in.

P.S. I'm gonna convert this issue to a discussion as it's not a problem with RHF but rather a per use-case optimization discussion