React hook form video tutorial

In this tutorial we will find out how to manage forms with React and the React Hook Form library.

Why this bookstore

React hook form offers a simplified API to retrieve and validate information from the form. To retrieve information React Hook Form does not use controlled fields but uses the system of ref to retrieve the information. This approach makes it possible to limit the number of renderings and thus improve the performance of the component that contains the form.

Code!

To start using the library we will use the hook useForm () which will allow you to retrieve the elements to use.

import React from "react"
import {useForm} from "react-hook-form"

export default function App () {
  const {register, handleSubmit, watch, errors} = useForm ()
  const onSubmit = data => console.log (data)

  return (
      {/ * "handleSubmit" will check the data before calling onSubmit * /}
    

      {/ * "register" register the field * /}
      
      {/ * We can also add validation rules * /}
      
      {errors.email && This field is required}
      Register
    
  
  )
}