Answers
- The form will render three times when
Bob
is entered into the name field. This is because each change of value causes a re-render because the value is bound to the state. - The form will never re-render when
Bob
is entered into the name field because its value isn’t bound to the state. - The
FormData
interface requires thename
attribute to be on theinput
element or it won’t be able to find it and it will returnnull
:<input type="search" placeholder="Search ..." name="search" />
- For React Hook Form to track the field, the
register
function needs to be spread on theinput
element as follows:function SearchReactHookForm() {
const { handleSubmit, register } = useForm();
return (
<form
onSubmit={handleSubmit((search) => console. log(search))}
>
<input
...