React Hook Form v7 is a performant form library that uses uncontrolled inputs to minimise re-renders. Its register, Controller, and useFieldArray APIs cover everything from simple forms to complex dynamic field arrays.
0 / 5 completed
1 / 5
What does register() do in React Hook Form v7?
register('fieldName', rules) returns an object of props that wire an uncontrolled input into React Hook Form. Spreading these onto an <input> gives RHF access to the input's ref for value reading and validation without controlled re-renders on every keystroke.
2 / 5
What does formState.errors contain in React Hook Form v7?
formState.errors is a nested object keyed by field name. For a field called email, errors.email?.message gives the validation message and errors.email?.type gives the rule that failed (e.g., 'required', 'pattern'). For nested or array fields the structure mirrors the field name path.
3 / 5
When should you use the Controller component in React Hook Form v7?
Controller wraps controlled components that manage their own internal state (e.g., React Select, Material UI TextField). It receives render with field and fieldState props, bridging the external component's onChange/value to React Hook Form's state without requiring a DOM ref.
4 / 5
What does useFieldArray provide in React Hook Form v7?
useFieldArray({ control, name: 'items' }) manages a dynamic list of sub-forms. It returns fields (the current array with stable RHF IDs), append(defaultValues), remove(index), swap(indexA, indexB), and others. Each field must be rendered using fields.map((field, i) => ...) with key={field.id}.
5 / 5
What is the role of handleSubmit(onValid, onInvalid) in React Hook Form v7?
handleSubmit() is passed to the form's onSubmit: <form onSubmit={handleSubmit(onValid)}>. RHF triggers all validation, and if all fields pass, calls onValid(data) with the typed form data. If validation fails, it calls the optional onInvalid(errors) handler and focuses the first invalid field.