Implementación de Formularios con React Hook Form y Chakra UI

En este episodio, exploramos la implementación práctica de formularios en una aplicación React utilizando la librería React Hook Form junto con componentes de Chakra UI. Se detalla el proceso de configuración, validación de datos y manejo de estados para un formulario de envío de artículos.

Configuración y Lógica de Formularios

Uso de React Hook Form

• Se integra el hook useForm para gestionar de forma eficiente el registro de inputs, el estado del formulario y la validación nativa.
• Se analiza el uso de handleSubmit para procesar los datos una vez que todas las validaciones son correctas.

Validación de Datos

• Se discute la estrategia de validación: se evita el uso excesivo de regex (patrones) cuando es posible y se prefiere la creación de funciones de validate personalizadas, como el uso de new URL() para asegurar que las direcciones ingresadas sean válidas y seguras (HTTPS).

Interfaz de Usuario con Chakra UI

Estructuración de Componentes

• Se utilizan componentes nativos de Chakra UI como FormControl, FormLabel, FormHelperText y Input para estructurar el formulario de manera profesional.
• Se implementa el componente Center para gestionar el layout y asegurar una correcta alineación visual de los elementos.

Manejo de Errores y UX

"Si le ponemos 'isInvalid' en Chakra, se verá diferente"

• Se utiliza la propiedad isInvalid basada en el estado de los errores del formulario para mostrar alertas visuales al usuario cuando una entrada no cumple con los criterios requeridos.
• Se ajusta el atributo autocomplete en "off" para mejorar el control sobre cuándo el navegador sugiere datos personales.