react-hook-form

Excessive re-renders in React Hook Form often stem from broad watch() subscriptions or improper useForm configuration. Replacing watch() with targeted useWatch and isolating controlled components via useController prevents unnecessary renders.

Optimize field arrays in React Hook Form by maintaining correct identities with stable keys and using virtualization-friendly data structures. Proper useFieldArray identity handling ensures state consistency across dynamic fields.

React Hook Form integrates with MUI and shadcn/Radix through useController. Correctly wiring useController isolates re-renders and ensures controlled component state synchronization without performance regressions.

The best way to configure React Hook Form is establishing complete defaultValues and selecting appropriate validation modes. These guardrails prevent undefined state and avoid unnecessary renders during re-validation timing.

Use useWatch in React Hook Form when you need reactive component subscriptions that trigger isolated re-renders. Use getValues for safe value access that retrieves state without subscribing to render updates.

Undefined state during React Hook Form field unregistration is fixed by adjusting unregister behavior and ensuring proper defaultValues coverage. These configuration guardrails prevent missing state bugs in dynamic forms.