Introducción a React Hook Form
Construir formularios con React es muy sencillo, y más hoy en día con los Hooks: una característica que la librería creada por Facebook agregó en su versión 16.8. Sin embargo, a medida que la aplicación crece, se debe optar por la optimización de sus componentes y los forms son un ejemplo de ello.
Los componentes en React que renderizan un formulario también controlan lo que pasa en el mismo, con las subsecuentes entradas del usuario.
Un campo de un formulario cuyos valores son controlados por React es denominado “componente controlado”.
Esto en sí no suele ser un problema, debido a la rapidez de la librería de React para rendererizar los componentes; pero puede afectar si se tienen varios componentes controlados.
Aquí es donde entra la librería React Hook Form. Esta nos permite hacer formularios no-controlados, manteniendo el estándar HTML, reduciendo el número de re-renders y generando una mejor experiencia de usuario.
Esto lo logra aislando los renders. Es decir, que cada input de un formulario cambie su evento que lo controla de manera individual; así solo se hace render de lo que el usuario escribe.
Veremos en un caso práctico muy sencillo, donde transformaremos un formulario controlado por React y lo des-controlaremos con React Hook Form.
React-Controlled-Form es un componente que tiene dos inputs y un botón; por lo tanto, se debe de manejar un state para cada campo y definir el state con su valor. Estos valores son cambiados mediante la función handleChange.
En realidad, es un formulario muy sencillo que no tendría ningún problema. Pero, ¿qué pasa si queremos agregarle funcionalidades como validaciones en los campos, manejo de errores y limitación de caracteres (regex)? Las validaciones son muy comunes en cualquier aplicación y podríamos hacerlas con vanilla JS o con librerías como Formik.
Ahora vamos a transformar React-Controlled-Form en React-Hook-Uncontrolled-Form con la ayuda de React-Hook-Form.
React-Hook-Form contiene la función useForm de la cual des-estructuramos las funciones:
- register: se usa como referencia y se asigna a cada input, de esta forma la librería puede hacer seguimiento de los cambios en los inputs.
- handleSubmit: pasará los datos del formulario cuando la validación del formulario sea exitosa.
- errors: un objeto que contiene los errores.
La manera en la que se utiliza es agregando un atributo ref a cada input, dándole el valor de la función register. Después, en el atributo onSubmit de la etiqueta form, se asigna como valor la función handleSubmit, que recibe como parámetro la función que envía la data recopilada del formulario a la API.
Hasta ahí todo sencillo, pero, ¿qué pasa con errors?
Para manejar los errores crearemos validaciones al formulario. Basta con pasar un objeto con validaciones HTML a la función register. Debido a que errors es un objeto, puedo mostrarlo en mi component; siempre y cuando hubiera datos que no validados con las reglas que previamente se definieron.
Los errores se acceden mediante las propiedades correspondientes de cada uno de los inputs en donde hay errores y verificar el tipo de error correspondiente.
¿Qué pasa si tengo reglas de negocio donde necesito hacer validaciones extras?
En este caso, también se puede crear Customs Validations. Hice una sentencia para ejemplificar las validaciones que ya se tenían en el campo password y agregué una validación extra para aceptar determinados caracteres.
La función validatePassword decide que caso de validación retornará dependiendo del valor ingresado por el usuario.
Conclusión
Ahora sabes cómo utilizar la libería react-hook-form de manera sencilla y manejar los errores con las validaciones correspondientes. Puedes revisar su documentación en su sitio oficial.
