Categorias do Site

Guia prático do useActionState no React

Aprenda a usar o useActionState no React para simplificar a gestão de estados e ações assíncronas em formulários.

Ícone de átomo azul claro sobre um fundo texturizado com listras horizontais vermelhas e brancas desbotadas.

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.

useActionState in React

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}

); } 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 (
    
{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!

  • 10 Melhores Temas de Landing Page para WordPress 2025

    Descubra os 10 melhores temas grátis para landing pages no WordPress em 2025 e otimize suas conversões.

    Descubra os 10 melhores temas grátis para landing pages no WordPress em 2025 e otimize suas conversões.

    Ler notícia completa
    Banner colorido promovendo
  • Agentes de IA no Atendimento: Suporte 24/7 Sem Estresse

    Descubra como agentes de IA melhoram o atendimento ao cliente, oferecendo suporte contínuo e reduzindo o estresse dos funcionários.

    Descubra como agentes de IA melhoram o atendimento ao cliente, oferecendo suporte contínuo e reduzindo o estresse dos funcionários.

    Ler notícia completa
    Imagem abstrata de linhas curvas em tons de preto formando um túnel, com texto sobre inteligência artificial em serviços ao cliente.
  • Por que o Gemini falha em atender os usuários

    Gemini promete melhorias, mas falha em desempenho real, levantando questões sobre IA e design centrado no usuário.

    Gemini promete melhorias, mas falha em desempenho real, levantando questões sobre IA e design centrado no usuário.

    Ler notícia completa
    Robô com aparência humana apresenta um roteiro de inteligência artificial em um grande monitor para um público em uma sala de reunião.
  • Plataformas de execução para agentes em ascensão

    Com o avanço da IA de prompts únicos para comportamentos autônomos e persistentes, uma nova classe de infraestrutura está surgindo: runtimes para agentes. Diferente de aplicativos ou plataformas tradicionais, são ambientes de execução projetados para criar, executar e orquestrar agentes de IA capazes de autonomia, uso de ferramentas e colaboração. Existem dois tipos principais de […]

    Descubra as novas plataformas de execução para agentes de IA, suas funcionalidades e como estão transformando o desenvolvimento autônomo.

    Ler notícia completa
    Ilustração estilizada de um homem de camisa laranja e um robô com detalhes em vermelho, separados por um chip entre eles, fundo azul.
  • Melhores Presets de Animação de Texto para Premiere

    A animação de texto vai além da decoração. Ela controla o ritmo, mantém a atenção e adiciona ritmo à edição. Uma palavra bem sincronizada na tela pode fazer mais do que uma transição sofisticada. Seja você criador de conteúdo para YouTube, tutorias detalhados, promos de produtos, reels, vlogs ou sequências de títulos, uma boa tipografia […]

    Descubra os melhores presets de animação de texto para aprimorar seus vídeos no Premiere Pro e encantar seu público.

    Ler notícia completa
    Imagem de uma paisagem com um viaduto, em tons de cinza, com o texto
  • Liderança: Relações Pessoais com Lars Rieger

    Lars Rieger é chefe de produto na Digistore24 DACH, uma plataforma de revenda digital e marketing de afiliados. Ele começou sua carreira como gerente de projetos na Digistore24 e foi promovido a gerente de produto líder. Após uma passagem pela CarOnSale, ele voltou à Digistore24 em 2024. Em nossa conversa, Lars fala sobre a importância […]

    Lars Rieger fala sobre a importância das relações em gestão de produtos e transformação digital na Digistore24.

    Ler notícia completa
    Imagem promocional de Lars Rieger, identificado como Head of Product na Digistore24, com logo da LogRocket. Design gráfico em tons de azul com linhas geométricas.
  • Melhores Templates de Cartões de Visita para 2025

    No mundo digital, cartões de visita ainda são essenciais para networking profissional. Eles criam uma impressão duradoura e influenciam a imagem profissional. O design correto de cartões de visita é crucial para ser lembrado positivamente. O Adobe InDesign é a escolha preferida para criar cartões de visita, oferecendo controle preciso de layout e design. Com […]

    Explore mais de 30 templates de cartões de visita para InDesign em 2025, perfeitos para diversas indústrias e estilos.

    Ler notícia completa
    Pilha de cartões de visita em tons de roxo com logotipo branco
  • Destaque: Medindo o Imensurável com Paul Weston

    Paul Weston é GM & VP de Produto na HubSpot, liderando a visão e estratégia do Service Hub. Em sua conversa, ele fala sobre “medir o imensurável”, trazendo dados objetivos para elementos difíceis de quantificar. Ele destaca a importância de focar nas necessidades de um conjunto específico de clientes e como pensa em diferenciação de […]

    Paul Weston discute como medir o imensurável em UX, focando em dados objetivos e necessidades dos clientes.

    Ler notícia completa
    Texto alternativo: Imagem promocional de Paul Weston, GM e VP de Produto na HubSpot, com pano de fundo gráfico em tons de azul e logos da LogRocket e HubSpot.
  • Conversando sobre o uso de Spinners no UX

    Olha, Spinner, já passamos por muita coisa juntos… Eu sei que você está fazendo o seu melhor — girando sem parar, pacientemente preenchendo o vazio, corajosamente mascarando o caos do backend como um técnico de palco sobrecarregado em uma produção teatral falida. Mas ambos sabemos que isso não funciona mais. No início, você era reconfortante. […]

    Spinners enfrentam críticas no UX. Progressos e alternativas como barras de progresso ganham espaço.

    Ler notícia completa
    Gráfico de evolução de círculos de carregamento, variando de incompletos a completos em tons de cinza, sobre fundo preto.