Introduce

Working with forms is one of the most difficult things when developing React applications. React is a minimalist UI library focused on controlling interface behavior, ensuring that the UI changes appropriately for each user behavior.

It does not provide a complete solution to meet user input needs, but it does provide a way to save form values ​​into local state with controlled components.

The processing forms in React require you to code the actions for it to work:

• Manage and validate user input with state
• Keep track of invalid errors
• Processing the form when submitting

To make it easier to build forms and process them, developers have created libraries to build forms with React. One of the best solutions is to use a library called Formik

But recently, there has been a new library called React Hook form.

In this article I will help you see the benefits of using React Hook Form with Formik.

How to handle form with React

This is an example of a React form built without any libraries supported. We will use Bootstrap to make the form prettier

We will get the following form:

In the example above, we first created a function component with a state named formState, where to store the input states, the validity of the input values ​​and errors. The form has two inputs, the email and the password, so we’ll need to initialize the input values ​​for each input box:

Next, we write the function to render the UI in the return state:

We use formValues ​​to display inputs values, while formErrors are used to indicate invalid form values,

Next, we write the function handleChange as follows:

The function will update the state’s value and run the handleValidation function to check if the value is valid:

The handleValidation function is where things get complicated. It first checks to see which input value has been validated, and then proceeds to validate.

Finally we need the function handleSubmit:

And that’s how you build a form with React. As we have seen, a form with only two input values ​​is verbose. Are you ready to find the Formik display to make everything simpler?

This is what Formik will help you with

Formik is a popular form building solution because it provides you with a reusable form where you only need to use its API to handle the three most difficult parts of the form:

• Get internal and external values ​​of form state
• Validate input and error messages
• Handle form submit

To get started with Formik, you need to install it already npm install formik . Here, the same form has 2 input values, when built with Formik will be as follows:

This new form uses 4 components provided by Formik: Formik, Form, Field and ErrorMessage. To use Formik, we need to wrap the Form component inside the Formik component:

Like regular forms, we will initialize the value of the form, but instead of writing the entire state for values, writing validate and error, we only need to use the built-in functions of Formik:

The Formik component also accepts prop functions that run in the event submit, take a look at the submit function, which will only run when the input value is valid:

Next, we will use the Form. First, we will use the API passed from Formik to Form. We will handle the error if any input value is entered incorrectly:

The ErrorMessage element will automatically display the error as a div element. Let’s write the function to perfect our form:

And now the form built by Formik is complete. And next I will show you React Hook Form, even better than Formik

Get started with React Hook Form

Like Formik, it was built to make it easier for developers to develop with the form in React. The biggest difference between the two is that the React Hook Form is designed to avoid re-rendering caused by user input.

This is how you would do it with a form similar to the example in Formik. Note here that the lines of code are less than those of Formik:

To use React Form Hook, we install it using the npm install react-hook-form command. Then import it into:

First, we’ll call the useForm method, which returns an object with the function set so we can build the form:

The core concept of React Hook Form is to use unregulated components on Hook by prop:

The function register also serves to generate validations for current inputs. The validate rule of React Hook Form is very similar to the html validate.

We will then pass errors to the ErrorMessage component, and it will display as a div:

Finally, we only need to pass the submit handling function to the form via onSubmit:

Here is a brief comparison between React Hook Form and Formik:

The article is referenced at: https://blog.bitsrc.io/react-hook-form-vs-formik-form-builder-library-for-react-23ed559fdae