Validação Assíncrona com useFormStatus no React: Atualizações de Status de Formulário Assíncronas

No desenvolvimento web moderno, os formulários são um elemento crucial para a interação do usuário. Garantir a validade dos dados e fornecer feedback em tempo real são fundamentais para uma experiência de usuário positiva. O hook useFormStatus do React, introduzido no React 18, oferece uma maneira poderosa e elegante de gerenciar o status do envio de formulários, especialmente ao lidar com validação assíncrona. Este artigo aprofunda-se nas complexidades do useFormStatus, focando em cenários de validação assíncrona, fornecendo exemplos práticos e delineando as melhores práticas para criar formulários robustos e fáceis de usar.

Entendendo o Básico do useFormStatus

O hook useFormStatus fornece informações sobre o último envio de formulário que acionou um ou dentro de um <form>. Ele retorna um objeto com as seguintes propriedades:

• pending: Um booleano que indica se o envio do formulário está atualmente pendente.
• data: Os dados associados ao envio do formulário, se disponíveis.
• method: O método HTTP usado para o envio do formulário (ex: 'get' ou 'post').
• action: A função usada como a ação do formulário.

Embora pareça simples, o useFormStatus torna-se incrivelmente valioso ao lidar com operações assíncronas, como validar a entrada do usuário em um servidor remoto ou realizar transformações complexas de dados antes do envio.

A Necessidade de Validação Assíncrona

A validação síncrona tradicional, onde as verificações são realizadas imediatamente no navegador, muitas vezes é insuficiente para aplicações do mundo real. Considere estes cenários:

• Disponibilidade de Nome de Usuário: Verificar se um nome de usuário já está em uso requer uma consulta ao banco de dados.
• Verificação de E-mail: Enviar um e-mail de verificação e confirmar sua validade exige interação do lado do servidor.
• Processamento de Pagamento: Validar detalhes do cartão de crédito envolve comunicação com um gateway de pagamento.
• Autocompletar Endereço: Sugerir opções de endereço enquanto o usuário digita requer a chamada de uma API externa.

Esses cenários envolvem inerentemente operações assíncronas. O useFormStatus, em conjunto com funções assíncronas, nos permite lidar com essas validações de forma elegante, fornecendo feedback imediato ao usuário sem bloquear a UI.

Implementando Validação Assíncrona com useFormStatus

Vamos explorar um exemplo prático de validação assíncrona da disponibilidade de um nome de usuário.

Exemplo: Validação Assíncrona de Nome de Usuário

Primeiro, criaremos um componente React simples com um formulário e um botão de envio.

            import React, { useState, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

function UsernameForm() {
  const [username, setUsername] = useState('');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData) {
    "use server";
    const username = formData.get('username');

    // Simula uma chamada de API para verificar a disponibilidade do nome de usuário
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simula a latência da rede

    const isAvailable = username !== 'taken'; // Simula a verificação de disponibilidade

    if (!isAvailable) {
      throw new Error('O nome de usuário já está em uso.');
    }

    console.log('O nome de usuário está disponível!');
    // Realize o envio real do formulário aqui
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor="username">Nome de Usuário:</label>
      <input
        type="text"
        id="username"
        name="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Verificando...' : 'Enviar'}
      </button>
       <StatusComponent />
    </form>
  );
}

function StatusComponent() {
    const { pending, data, method, action } = useFormStatus();

    return (
        <p>
          {pending && "Enviando..."}
          {data && <pre>{JSON.stringify(data)}</pre>}
        </p>
    )
}

export default UsernameForm;

            

              

Copy