Existen muchas opciones para trabajar con la lógica de nuestros formularios en React, algunas herramientas son muy populares como lo es Formik o TanStack Form; sin embargo, existe un Hook que hace muy fácil trabajar con formularios en React y que pesa muy poco; estoy hablando de React Hook Form.

React Hook Form es un Hook creado por un grupo de desarrolladores llamado opencollective.com, entre estos developers podemos encontrar a Beekai o a Bill Luo. 🤓

React Hook Form tiene una propuesta minimalista, enfocada a la experiencia del developer (Developer Experience) pues su uso es intuitivo y posee una API muy familiar para el desarrollador React; es superligero, pues no necesita ninguna dependencia y está pensado para usar el HTML o JSX que ya posee tu aplicación.

Adicionalmente, React Hook Form, presume de reducir la cantidad de “re-renders” y los cómputos de validación, logrando con esto un montado más rápido del componente.

Finalmente, combinando todas estas ventajas, con React Hook Form podemos lograr la mejor experiencia para nuestro usuario, sin perder validaciones consistentes en nuestro formulario; además, esta biblioteca ha ganado ya múltiples premios y reconocimientos. 🏆

Bueno, si ya estás interesado, es hora de tirar algo de código para probar React Hook Form; ¡ha! Por cierto, también puedes emplearlo con React-Native. 🤯

Instalación y herramientas

Para instalarlo basta con ejecutar: npm i react-hook-form.

Para luego importarlo deconstruyendo useForm:

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

Como bien sabemos, al ser un React Hook, debemos invocarlo al principio de nuestro componente y declarar, con un poco de deconstrucción, las funciones y utilidades que pensamos ocupar.

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

Analicemos pues, algunas de las utilidades disponibles:

register

Al usar register en las etiquetas <input> del formulario, ponemos los valores a disposición de la validación y sumisión. ✅

<input {...register("firstName")} />
	// ...
<select {...register("gender")} >
  // ...
</select>
	// ... 

handleSubmit

Esta función es la encargada de realizar la validación antes de hacer el envío o sumisión. La función que le pases recibirá la data ya validada.

const onSubmit = validatedData => console.log(data);

return (
	<form onSubmit={handleSubmit(onSubmit)}>

// ...

watch

Con watch, podemos suscribirnos a los cambios en los <inputs> watch() es una función que puede observar campo por campo o todos juntos.

// cuando invocas sin argumentos, se observa todo.
const observarTodos = watch();
// también puedes ser específico.
const mirarDoscampos = watch(["age", "firstName"]);

formState

También tenemos a la mano todo el estado del formulario, mismo que incluye los errores, que son muy útiles para dar feedback a nuestro usuario.

const { formState: { errors } } = useForm()

// ...

<input {...register("exampleRequired", { required: true })} />
{/* Se pueden usar los errores para mostrar validaciones  */}
{errors.exampleRequired && <span>Este campo es requerido</span>}

Existen muchas herramientas más como control, reset o trigger, que pueden ser útiles para formularios avanzados o controlados; no dejes de echarle un ojo a la documentación. 👀

Ejemplo de uso simple

Vamos entonces a crear un pequeño formulario de registro para utilizar de primera mano este poderoso Hook.

// 1. Importamos el Hook desde la biblioteca npm
import { useForm } from "react-hook-form"

export default function Page(){
// 2. Declaramos las herramientas que vamos a utilizar
	const { register, handleSubmit, formState: { errors } } = useForm();

// 3. Declaramos la función que recibirá los datos una vez validados
	const onSubmit = data => console.log("Enviando al server", data);

// 4. Finalmente, utilizamos las herramientas en los lugares adecuados
	return (
	    <form onSubmit={handleSubmit(onSubmit)}>
	      <input defaultValue="test" {...register("name")} />
	      <input {...register("email", { required: true })} />
	      {errors.email && <span>Ingresa un email válido</span>}
	      <input type="submit" />
	    </form>
	  )
}

No olvides que este Hook se puede usar con React-Native, lo que nos evita cambiar de herramientas en un proyecto full stack.

Como hemos visto, este custom Hook, viene bien cargado de utilidades para hacernos la vida más sencilla cuando trabajamos con formularios y React tanto en la web, como en mobile.

Así que, ¿A ti qué te parece este Hook? ¿Le piensas dar una oportunidad? Déjame saberlo en los comentarios.

Un abrazo. Bliss. 🤓

Enlaces relacionados

Docs oficiales

https://react-hook-form.com/docs/useform