Como trabalhas com formulários em aplicações de…

Ao trabalhar com formulários em SPA, uso componentes controlados ou não controlados.

Componentes controlados: O valor do campo do formulário é armazenado no estado do componente e atualizado através de setState.

// Exemplo de componente controlado em 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>
        Nome:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}

Vantagens dos componentes controlados:

É mais fácil controlar e validar a entrada.
É mais simples implementar lógica condicional para mostrar campos.
É conveniente integrá-los com bibliotecas de gestão de estado (Redux, Vuex).

Componentes não controlados: O valor do campo do formulário é armazenado diretamente no elemento DOM, acessível através de ref.

// Exemplo de componente não controlado em 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>
        Nome:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}

Vantagens dos componentes não controlados:

São mais simples para formulários simples sem lógica complexa.
Requerem menos código para uma implementação básica.

Abordagens gerais ao trabalhar com formulários em SPA:

Validação:
- No lado do cliente (JavaScript) para feedback instantâneo.
- No lado do servidor para garantir a integridade dos dados.
- Uso de bibliotecas de validação (Yup, Zod, VeeValidate, Vuelidate).
Manipulação do envio:
- Prevenir o comportamento padrão (event.preventDefault()).
- Enviar dados ao servidor (Fetch API, Axios, XHR).
- Exibir o status do envio (carregando, sucesso, erro).
Gerenciamento de estado:
- Uso do estado local do componente.
- Uso de gerenciadores de estado (Redux, Vuex, Pinia) para formulários complexos ou que são usados em outras partes da aplicação.
Retroalimentação ao usuário:
- Indicadores de carregamento.
- Mensagens de erro de validação.
- Mensagens de sucesso/erro no envio.
Acessibilidade (A11y):
- Uso de elementos HTML semânticos (<form>, <label>, <input>, <button>).
- Ligação entre <label> e os campos de entrada correspondentes (atributo for ou aninhamento).
- Uso de atributos WAI-ARIA se necessário.
Desempenho:
- Debounce ou throttling de eventos onChange para campos com mudanças frequentes.
- Otimização do render ao alterar o estado do formulário.
Testes:
- Testes unitários para a lógica do formulário e validação.
- Testes de integração para a interação do formulário com a API.

A escolha entre componentes controlados e não controlados depende da complexidade do formulário e dos requisitos de gerenciamento de estado e validação. Para a maioria dos formulários, especialmente os complexos, componentes controlados oferecem maior flexibilidade e controle.

Como trabalhas com formulários em aplicações de página única (SPA)?