In this article you will learn about React Hook Form package and how to easily manage your forms in your react.js app
Nearly in every web application there's some form where the user enters data ... whether it is a signup / login form or just a contact us form, a job application form or whatever type of user input your business might need.
Now as a Software Developer or specifically a Front End developer your objective while building those forms is to collect the data from the user, send them to an API or direct them according to the business logic, show the user some error messages according to a validation schema and hopefully doing this in the most performant way possible along the way
So the question is how do we usually do this with React with no third party libraries involved?
We can use our state and the two way binding like the example in the screen shot down below
Now there are two main issues with that approach:
- The Performance
- The Cleanliness of our code
The Performance:
Let's assume we have a form of 5 to 10 inputs which is the usual range, now with every character a user types, edits or deletes this onChange function will run and hence the DOM will Re-render
and to the best of my knowledge that's not a great performance now, is it?
The Cleanliness of our code:
Now maybe not too many people pay attention to this point, nevertheless when you code something, you always have to keep in mind that other people might need to read it, update it, edit it or learn form it and hence it should be readable and understandable to most people who have working experience in the field
That being said, if you have too many inputs with too many useState hooks and too many OnChange Functions, nearly almost the same number of hooks and some sort of if statement validations to validate those inputs and show the user your errors.
Now this is how your code will look like
Not pretty I assume
So what if I tell you, that you can validate all of your form inputs, connect them all to one hook and only re-render the DOM once when the user submits ? sounds like a solution to the miss right?
but what about the errors you say? Don't worry we will be showing them to the user on the fly, but still with very minimum effects on the rendering
So to the main topic of this article React Hook Form:
I have made a YouTube tutorial - my first to be honest - about React Hook Form and did my best to dive deep into most of the aspects and features it offers to you
In this tutorial I dive deep in how to connect your form to the React Hook Form useForm hook, different ways of handling the form validation and their effects on the performance of our application
I also dive into connecting the React Hook Form to a custom validation Schema using Yup and JOI so that you have a variety of options when it comes to validating and maybe writing a clean code
by default React Hook Form gives you what's called a resolver that allows you to validate your form using a custom validation library like Yup, Joi, Zod and much more and they have official support for plenty of them which makes your life a lot easier
I will be diving into all of this and more in this continuing mini series on Youtube
you can always check the official React Hook Form docs here
Watch The full Tutorial down below or on my Channel on YouTube Chanel
Top comments (0)