FAQs

Menu

Performance of React Hook Form

Performance is one of the primary goals for building this custom hook. React Hook Form relies on uncontrolled component, hence the reason why the register function occurs at the ref. This approach will reduce the amount of re-rendering occurring due to user typing or value changing. Components mount to the page is much quicker as well because they are not controlled. For mounting speed, I have completed a quick comparison test which you can refer to by this repo link.

How to create an accessible input error and message?

React Hook Form is based on Uncontrolled Component, which gives you the ability to build an accessible custom form easily.

Does it work with Class Components?

No, not out of box. but you can build a wrapper around it and use in your Class Component.

You can’t use Hooks inside of a class component, but you can definitely mix classes and function components with Hooks in a single tree. Whether a component is a class or a function that uses Hooks is an implementation detail of that component. In the longer term, we expect Hooks to be the primary way people write React components.

How to reset the form?

There are two methods to clear the form.

HTMLFormElement.reset()

This method does the same thing as clicking a form's reset button, and only clearsinput/select/checkbox values.

React Hook Form API: reset()

React Hook Form's reset method will reset all fields value, and also will clear all errors within the form.

How to initialize form values?

React Hook Form relies on uncontrolled component. With an uncontrolled component, you can specify a defaultValue or defaultChecked to an individual field. However, the hook itself does provide an easier way to initialise all input values too. Example below:

Why is first keystroke is not working?

Double check if you are using value instead of defaultValue.

React Hook Form is built based on uncontrolled input, which means you don't need to change input value via state by onChange. Hence you don't need value at all, in fact, you only need defaultValue for initial input value.

Testing failed due to MutationObserver?

If you have difficulty during testing and the issue was caused by MutationObserver. Make sure you install mutationobserver and import this package in your test setup.js file.

npm i mutationobserver-shim

React Hook Form, Formik or Redux Form?

First of all, all libs try to solve the same problem which is making form building experience easy and great. However, there are some fundamental differences between the three, react-hook-form is built with uncontrolled input in mind and tries to provide your form with best performance and least re-render if possible. On top of that, react-hook-form is built by React Hook and used as hook, which means there is no Component for you to import. Here are some of the detail differences:

watch vs getValues vs state

watch: subscribe to input’s change via event listener and re-render based on which fields that are subscribed. Check out this codesandbox for actual behaviour.

getValues: get value which stored inside the custom hook as reference, fast and cheap. This method doesn’t trigger re-render.

local state: React local state represent more than just input’s state and also decide what to render. This will trigger on each input’s change.

Why is default value not changing correctly with ternary operator?

React Hook Form doesn't control your entire form and inputs, which is the reason why React wouldn't recognise the actual input that has been exchanged or swopped. As a solution, you can resolve this problem by giving a unique key prop to your input. You can also read more about the key props from this article written by Kent C. Dodds.

Controller not working with submitFocusError?

After a validation error, React Hook Form will automatically focus on the invalids elements of which have their proper ref, like the native inputs (eg: <input />) or some 3rd party Components that correctly export his ref (eg: from MUI <TextField inputRef={register({required: 'Field Required'})} />)

However, for some 3rd party controlled Components like <Autocomplete> from MUI or <XX> from AntD) it's very difficult to predict his ref because the formats changes, so React Hook Form will properly detect the validation error but will not be able to automatically focus that kind of Components.

As a workaround, after the validation error, you can manually focus on the 3rd party controlled Component (if you can get the actual internal input ref), for example:

If you find difficult to make the autofocus with external controlled component. It is possible to disable the "autofocus on error" feature. Maybe this behavior will bring a better user experience in some cases. useForm({submitFocusError: false});

We Need Your Support

If you find React Hook Form to be useful in your React project, please star to support the repo and contributors ❤