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:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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.

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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. ✅

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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.

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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.

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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.

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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.

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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