CODEWITHSUNDEEP
javascriptreactjsreact-hook-form
Igor William
Igor William

Reputation: 93

Problem of re-rendering useEffect with watch all fields using React Hook Form

I using a lib React Hook Form for a form with checkboxes inputs. I don't understand whats wrong in this code. This code re-render a useEffect with dependency. This behavior not verified when a just try render a single checkbox input. Someone have a idea, for use a map function to render multiple inputs, without this re-render ?

I create a sandbox with this code https://codesandbox.io/s/react-hook-form-watch-c9xgu?file=/src/index.js

Upvotes: 5

Views: 28745

Answers (1)

Wasiq Ahmadzai
Wasiq Ahmadzai

Reputation: 221

You are using react-hook-form watch method. this method will re-render at the root level of the app whenever a field value is changed.

for better performance you can use useWatch instead, it will only re-render at the component level.

Please have a look at the official docs here

Upvotes: 14

Related Questions