¿Cómo trabajas con formularios en aplicaciones de una…

Al trabajar con formularios en SPA, utilizo componentes controlados o no controlados.

Componentes controlados: El valor del campo del formulario se almacena en el estado del componente y se actualiza mediante setState.

// Ejemplo de componente controlado en React
import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Enviado:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nombre:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}

Ventajas de componentes controlados:

Es más fácil controlar y validar la entrada.
Es más sencillo implementar lógica condicional para mostrar campos.
Es conveniente integrarlos con bibliotecas de gestión de estado (Redux, Vuex).

Componentes no controlados: El valor del campo del formulario se almacena directamente en el elemento DOM, al que se accede mediante ref.

// Ejemplo de componente no controlado en React
import React, { useRef } from 'react';

function MyUncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Enviado:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nombre:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}

Ventajas de componentes no controlados:

Son más simples para formularios sencillos sin lógica compleja.
Requieren menos código para una implementación básica.

Enfoques generales al trabajar con formularios en SPA:

Validación:
- En el lado del cliente (JavaScript) para retroalimentación instantánea.
- En el lado del servidor para garantizar la integridad de los datos.
- Uso de bibliotecas de validación (Yup, Zod, VeeValidate, Vuelidate).
Manejo del envío:
- Prevención del comportamiento por defecto (event.preventDefault()).
- Envío de datos al servidor (Fetch API, Axios, XHR).
- Mostrar estado del envío (cargando, éxito, error).
Gestión del estado:
- Uso del estado local del componente.
- Uso de gestores de estado (Redux, Vuex, Pinia) para formularios complejos o que se usan en otras partes de la aplicación.
Retroalimentación al usuario:
- Indicadores de carga.
- Mensajes de validación de errores.
- Mensajes de éxito/error en el envío.
Accesibilidad (A11y):
- Uso de elementos HTML semánticos (<form>, <label>, <input>, <button>).
- Vinculación de <label> con los campos de entrada correspondientes (atributo for o anidamiento).
- Uso de atributos WAI-ARIA si es necesario.
Rendimiento:
- Debounce o throttling de eventos onChange en campos con cambios frecuentes.
- Optimización del renderizado al cambiar el estado del formulario.
Pruebas:
- Pruebas unitarias para la lógica del formulario y validación.
- Pruebas de integración para la interacción del formulario con la API.

La elección entre componentes controlados y no controlados depende de la complejidad del formulario y los requisitos de gestión del estado y validación. Para la mayoría de los formularios, especialmente los complejos, los componentes controlados ofrecen mayor flexibilidad y control.

¿Cómo trabajas con formularios en aplicaciones de una sola página (SPA)?