Comparación de librerías de React forms: Formik vs React Hook Form

Los formularios son la herramienta de interacción más común que podemos encontrar en muchas aplicaciones y también la parte desafiante para recoger y preservar los datos. Existen múltiples librerías que podemos utilizar como React Final Form, Formik, Redux Form y React Hook Form. En este artículo nos centraremos en cómo React puede resolver el problema de trabajar con formularios y hablaremos de dos conocidas librerías llamadas React Hook Form y Formik.

Explorando componentes de React

En primer lugar, me gustaría explicar la diferencia entre los componentes controlados y no controlados. Los elementos HTML <input> y <select> se diferencian de los demás elementos DOM por tener su propio estado interno. La página oficial de React recomienda dar el control de cambiar el valor de estos elementos del formulario a la propia librería, ya que en React existe el principio de ‘el estado es la única fuente de verdad’. De este modo, los componentes que tienen sus estados gestionados por React se denominan «componentes controlados». Por otro lado en la página oficial, también se menciona que podemos utilizar componentes no controlados: como escribir un handler de eventos y canalizar todo el estado de entrada a través de un componente React.

Los componentes no controlados son como las entradas de formularios HTML tradicionales, se utiliza «ref» para obtener los valores del formulario y es más sencillo implementar las entradas del formulario. En los componentes controlados, cada vez que el usuario cambia el valor de la entrada, el formulario también se actualiza y guarda los datos en su estado. Esta característica puede ser útil cuando queremos hacer una validación in situ y forzar un formato de entrada específico.

Formik vs React Hook Form

Según la documentación de React, Formik es una buena opción si queremos una solución completa que incluya la validación, el seguimiento de los campos visitados y el manejo de el envío del formulario. Formik utiliza componentes controlados. Además como podemos mantener el estado del formulario localizado y gestionado por Formik es bueno para construir formularios de varios pasos.

Por otro lado, React Hook Form utiliza componentes no controlados. Dado que los componentes no controlados mantienen la fuente de verdad en el DOM, es más fácil integrar código React y no React. React Hook Form aísla los componentes de entrada de los demás y evita que se vuelva a renderizar el formulario para una sola entrada. Evita este re-renderizado innecesario. Así que es una gran ventaja en términos de rendimiento en comparación con Formik que actualiza cada cambio en cada campo de entrada. 

En Formik se pueden construir formularios de dos maneras diferentes, una con el uso de un componente Formik y campos proporcionados por Formik y la segunda manera es mediante el uso del hook useFormik. Con el primer método se habilitan todas las características y esto podría perjudicar el potencial de Formik. Para formularios simples se recomienda utilizar el hook useFormik. Con useFormik no podemos trabajar con componentes como , , , y connect() porque requieren React Context.

En nuestro ejemplo crearemos un formulario multipaso con el componente Formik y React Hook Form. En el primer ejemplo con la librería Formik, envolvemos nuestros pasos dentro del componente Formik:

<Formik
       initialValues={
        {firstName: '',
         lastName:'',
         email:'',
         age: '',
         birthday: '',
         companyName: '',
         companyYear: ''}
       }
       validationSchema={currentValidationSchema}
       enableReinitialize
       onSubmit={handleSubmitFormik}
     >
       {({ isSubmitting, handleChange, values }) => (
         <Form className="App">
             <div className="App”>
             {renderStepFormik(activeStep, handleChange, values)}
             {activeStep===3 ?
               "":
               <button
                 disabled={isSubmitting}
                 className="next"
                 type="submit"
                 color="primary"
               >
                 &raquo;
               </button>
             }
           </div>
         </Form>
       )}
     </Formik>

En el primer paso, tenemos nombre, apellido y correo electrónico; en el segundo: edad y cumpleaños; y en el último nombre de la empresa y año. Dentro de la función renderStepFormik, tenemos un interruptor para renderizar cada paso con sus campos relacionados y el componente del formulario:

function Form({formData, handleChange, values, register} : FormProps){
 useEffect(() =>console.log("Render times:", renderTimes++));
   return (
   <div className="App">
   <Grid container spacing={3}>
   {formData.map(({id, label, type} : FormData) => {
       return (
         <>
         <Grid item xs={12}>   
         <TextField
           id={id}
           label={label}
           name={id}
           type={type}
           onChange={handleChange}
           value={getIn(values, id)}
         />
         </Grid>
         </>
       );
     })
   }
   </Grid>
   </div>
   );
}

Dentro del hook useEffect, calculamos las veces que se re-renderiza el componente Form. Como podemos ver en el gif de abajo, el componente Form se reanuda 42 veces. Comparemos el mismo formulario de varios pasos con la librería React Hook Form.

Con React Hook Form, necesitamos crear tres componentes para los tres pasos. Dado que el React hook form mantiene los valores de los campos en el DOM, si utilizamos el mismo componente Form, veremos los valores rellenados en el primer paso en el segundo paso como pre-rellenados. Usamos la función register de la librería para establecer los valores de los campos a enviar.

function Form({formData, register, handleSubmit, step, setStep} : FormProps){
 const onSubmit = (data : Object) => {
   if (step===3) {
     alert(JSON.stringify(data, null, 2));
   }
   setStep(step)
 }
   return (
   <div className="App">
    <form onSubmit={handleSubmit(onSubmit)}>
     <Grid container spacing={3}>
      {formData.map(({id, label, type} : FormData) => {
        return (
         <>
         <Grid item xs={12}>   
         <TextField
           id={id}
           fullWidth
           label={label}
           name={id}
           type={type}
           {...register(id)}
          />
         </Grid>
         </>
       );
     })
    }
    </Grid>
    <button
      className="next"
      type="submit"
      color="primary"
    > &raquo;</button>
   </form>
   </div>
   );
}

Como podemos ver abajo, el componente se renderiza 3 veces. Como nuestra fuente de verdad es el DOM con React Hook Form, no se vuelve a renderizar cada vez que cambia la entrada. Esto podría ser grande para la optimización del rendimiento cuando tenemos muchos campos en un formulario simple.

Conclusión

En resumen, en nuestro ejemplo de formulario multipaso, mientras que React Hook Form evitaba que todo el formulario se volviera a renderizar por un solo cambio de campo, Formik lo actualizaba cuando había cambios en el input. Es cierto que hay menos código escrito con Formik ya que sólo renderizamos un componente y con React hook form tres, pero también debemos considerar que tendríamos un coste en el rendimiento debido a los re-renders. De acuerdo a los requerimientos de nuestra aplicación debemos decidir cuál es el apropiado. Formik puede ser útil cuando queremos hacer validación in situ y dar un formato de entrada específico. Además, como mantenemos el estado del formulario localizado, es ventajoso para construir formularios de varios pasos. React hook form es genial para formularios simples y no tiene dependencias. Al final, ambas librerías son muy útiles para implementar formularios con React.

Links de interés

Looking for the Best React Form Library? It’s Probably on This List por Peter Mbanugo @Dev.To

React Hook Form vs. Formik: A technical and performance comparison por Siegfried Grimbeek @LogRocket

Why You Should Choose React Hook Form Over Formik and Redux-Form por Madushika Perera @Bits and Pieces

React Hook Form VS Formik por Nathan Sebhastian @Bits and Pieces