Gerenciar o estado de formulários no React pode ser complicado, entre acompanhar valores, lidar com envios assíncronos e erros. O useActionState é um Hook do React que simplifica essa tarefa, facilitando o gerenciamento de ações do usuário, como envios de formulários e mudanças de estado assíncronas. Ele oferece uma forma mais limpa e previsível de lidar com essas situações.

O useActionState associa uma ação do usuário a um pedaço de estado, simplificando a atualização desse estado conforme a ação é executada. Aqui está um exemplo básico:

const [state, formAction, isPending] = useActionState(actionFn, initialState);

Benefícios principais do useActionState:

• Reduz o código boilerplate: menos variáveis de estado separadas para carregamento, erros e valores submetidos.
• Simplifica atualizações assíncronas: gerencia ações baseadas em promessas sem useEffect extra.
• Melhora a performance: evita re-renderizações desnecessárias ao gerenciar estados de forma eficiente.

Exemplos práticos de useActionState

Aplicativo de contador

Um exemplo básico de uso do useActionState é em um aplicativo de contador. Ele oferece uma maneira limpa de lidar com atualizações assíncronas, como escrever em um servidor ou banco de dados.

"use client";

import { useActionState } from 'react';

async function increment(prevCount) {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return prevCount + 1;
}

function CounterApp() {
  const [count, formAction, isPending] = useActionState(increment, 0);

  return (
    

      
Count: {count}
      
        {isPending ? 'Incrementing...' : 'Increment'}
      
    
  );
}

export default CounterApp;

No exemplo acima, o useActionState gerencia todo o processo de atualização de estado do contador, mantendo o componente simples mesmo ao lidar com operações assíncronas.

Envio de formulário

Para cenários mais complexos, como o envio de formulários com operações assíncronas e feedback para o usuário, o useActionState simplifica a gestão de estados e efeitos.

"use client";

import { useActionState } from "react";

// submit form action
async function submitForm(prevState, formData) {
  await new Promise((resolve) => setTimeout(resolve, 1500));
  const email = formData.get("email");
  if (!email || !email.includes("@")) {
    return { success: false, message: "Please enter a valid email address." };
  }
  return { success: true, message: "Form submitted successfully!" };
}

function FormApp() {
  const [state, formAction, isPending] = useActionState(submitForm, {
    success: null,
    message: "",
  });

  return (
    

      

        

          
          
          
            {isPending ? "Submitting..." : "Submit"}
          
          {state.message && (
            

              {state.message}
            
          )}
        
      
    
  );
}

export default FormApp;

Este exemplo mostra como o useActionState gerencia o envio de formulários de forma limpa e declarativa, sem variáveis de estado extras.

Conclusão

O useActionState simplifica a lógica de IU ao lidar com fluxos assíncronos, como envios de formulários ou interações com o servidor, acoplando atualizações de estado diretamente a ações do servidor. Experimente este Hook para tornar seu código mais limpo e fácil de manter.

Boa codificação!