React form validation with Hook in 5kB
Tags: reacthooks, react, hooks, formvalidation
Published: 2019-04-29 23:39:57

---
title: React form validation with Hook in 5kB
published: true
description: React Hook Form - React hook for form validation without the hassle
tags: #reactHooks #react #hooks #formValidation
---

<img src="https://miro.medium.com/max/5688/1*lo-U-rSPHCRTYV8Md5QgOQ.png" />

TL;DR: Introducing a new React Hook library to deal with form validation with an easier and cleaner approach (IMHO).

I have been dealing with forms over the past years, whether it’s a single form submission or multiple steps funnel.

Recently <a href="https://reactjs.org/blog/2019/02/06/react-v16.8.0.html">React 16.8</a> have landed us with <a href="https://reactjs.org/docs/hooks-intro.html">Hook</a>, which in my opinion is one the greatest features that React team has been delivered🌹(Thank you React Team). Therefore, I have discovered a new approach to write form validation, potentially a cleaner approach. let me show you the code 🔎

```jsx
import React from 'react'
import useForm from 'react-hook-form'

function App() {
  const { register, handleSubmit, errors } = useForm() // initalise the hook
  const onSubmit = (data) => { console.log(data) } // submission when input are valid
    
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstname" ref={register} /> // register input
        
      <input name="lastname" ref={register({ required: true })} /> // register as required field
      {errors.lastname && 'Last name is required.'} // display error message when last name is not valid

      <input name="age" ref={register({ pattern: /\d+/ })} />  // register as input with pattern
      {errors.age && 'Please enter number for age.'} // display error message when age is not valid

      <input type="submit" />
    </form>
  )
}
```


As you can see from the example above, there is no Component have been imported. So instead of having <a href="https://reactjs.org/docs/forms.html">controlled input/select</a> over the form, this approach leverage <a href="https://reactjs.org/docs/uncontrolled-components.html">uncontrolled form input</a> and registering their <a href="https://reactjs.org/docs/refs-and-the-dom.html">ref</a> into the <a href="https://github.com/bluebill1049/react-hook-form">React hook form</a>. This allows the hook to have full control and insight over your form elements, and hence this reveal many other benefits:

* No external Components required to wrap around inputs, which made the hook library much smaller (5kb gzip)
* Because it’s uncontrolled, you are no longer required to have onChange and set value to your input, start leveraging your existing HTML markup.
* With Component’s ref been registered into the Hook, you can easily access its ref when an error occurred, and anchors to the particular field.
* Much simpler API, because validation occurs at the register level.
* Great for performance as input change no longer trigger re-render, check out the performance comparison <a href="http://react-hook-form.now.sh">here</a>.
* Easy form state access, since Hook is holding refs for each input. you can easily query the value of them.
* Support browser build-in validation ❤️.

Those are my summaries of benefits over using React Hook Form, I think with this approach, things are much simpler (IMHO). Please check out the website for a <a href="https://react-hook-form.now.sh/">live demo</a>, I have also built a form <a href="https://react-hook-form.now.sh/builder">builder</a> which allows you to create form and copy/paste code to your environment or codeSandbox to test them out. Many examples also live on the <a href="https://github.com/bluebill1049/react-hook-form/tree/master/examples">Github</a> page.

<img src="https://thepracticaldev.s3.amazonaws.com/i/5zmi7vmw53o16uoabhov.jpg" />

I really hope this will make form validation easier, and feel free to leave me with issue or suggestion on <a href="https://github.com/bluebill1049/react-hook-form">Github</a> (please leave a star if you find it useful 🙏🏻). ❤️ Thank you for reading.