React Hook Form Crash Course

Updated:

3 Mar 2021

Published:

29 Jan 2021

Forms are really hard. Even with over 20 years experience with internet. People still misunderstand field.

As developer we are too close to it and many times we are blind to what non technical people see when they look at form.

I always run real life focus group for filling out forms with friends and family.

Now running tests on people gives you ideas on how to fix it.

But technical implementation is not easy also. You need to give right amount of information in right amount of language or sign at the right amount of time.

If you give too much information then they are likely to not fill the form.

And we need to do this while maintaining fast performance, lower page size and lower battery and network consumption.

Luckily its done for us by react hook form package. And we are going to learn to implement into NextJS and create react app.

To read rest of the article please Purchase Subscription

View complete source code on github

Before we get started I would recommend to developReact/NextJS project inside development docker container.

So we no longer have the issue of "this works on my computer" 💻.

And it will not mess with your existing workflow. So checkout my blog post for detailed video 🎞️ explanation.

Then checkout NextJS/React development container settings on github.

Basics of React hook form

Pro Tip: Enable Subtitle

Basics example for NextJS Source code on github

Basics example Create React App Source code on github

Reset form with React hook form

Pro Tip: Enable Subtitle

Form Reset Source code on github

Plain HTML validation

Pro Tip: Enable Subtitle

Regular expression crash course for form validation.

HTML validation Source code on github

React hook form validation

Pro Tip: Enable Subtitle

Regular expression crash course for form validation.

React hook form validation Source code on github

Create new NextJS project and add form to it. Then add package as follows

npm i react-hook-form

We need to install this as regular dependency not as dev dependency because we need this package inside production version of the app.

Also this entire library is written in pure typescript. So we don't need to install types.

Then in the form page add the hook

From the hook get the register and handle submit function.

You need to register every input i.e. text input, select, radio etc etc. Like following code

Make sure name is specified for every input and it matches with form submit type.

There is no type safety here. You need to manually specify it.

And don't forget to add that in the hook so its available for every step of the hook.

Then you need to wrap actual on submit function with handle submit as follows.

And that's it. Now you should be able to access form information at on submit asynchronous function as follows.

So this is how you add brand new item.

But if you want to edit item that already exists then you need to pass in as default value as follows.

The process is same if you are using in NextJS or create react app.

This is just short intro you can see the rest of it in the video at the top.

View complete source code on github

Free users cannot comment below so if you have questions then tweet me @apoorvmote. I would really like to hear your brutally honest feedback.

If you like this article please consider purchasing paid