useActionState

O useActionState é um hook introduzido no React 19 que permite atualizar o estado de um componente com base no resultado de uma ação de formulário. É especialmente útil em aplicações que utilizam React Server Components, permitindo que formulários sejam interativos mesmo antes do JavaScript ser executado no cliente.

Vamos explorar isso com um exemplo doce: uma loja de chocolates! 🍫

Aqui trago um exemplo simples do seu uso:

import { useActionState } from 'react';

// Função de ação que incrementa o estado atual
async function increment(previousCount, formData) {
  return previousCount + 1;
}

function ChocolateCounter() {
  // Inicializa o estado com 0 e obtém a ação do formulário
  const [count, formAction, isPending] = useActionState(increment, 0);

  return (
    <div>
      <p>Total de chocolates: {count}</p>
      <form action={formAction}>
        <button type="submit" disabled={isPending}>
          Adicionar Chocolate
        </button>
      </form>
    </div>
  );
}

Como funciona?

• Função de Ação (increment):
  Recebe o estado anterior (previousCount) e os dados do formulário (formData). Retorna o novo estado incrementado.

• Hook useActionState:
  Recebe a função de ação e o estado inicial (0). Retorna um array com:

  1. O estado atual (count).
  2. A função de ação para o formulário (formAction).
  3. Um booleano indicando se a ação está pendente (isPending).

• Formulário:
  Ao submeter o formulário, a função de ação é chamada, atualizando o estado com o novo valor.

Observações importantes

• Execução no Servidor:
  Quando usado com frameworks que suportam React Server Components, o useActionState permite que formulários sejam interativos antes mesmo do JavaScript ser carregado no cliente.

• Assinatura da Função de Ação:
  A função passada para o useActionState recebe o estado anterior como primeiro argumento, diferentemente de uma ação de formulário tradicional.

Como funciona?

• Função de Ação (increment):
  Recebe o estado anterior (previousCount) e os dados do formulário (formData). Retorna o novo estado incrementado.

• Hook useActionState:
  Recebe a função de ação e o estado inicial (0). Retorna um array com:

  1. O estado atual (count).
  2. A função de ação para o formulário (formAction).
  3. Um booleano indicando se a ação está pendente (isPending).

• Formulário:
  Ao submeter o formulário, a função de ação é chamada, atualizando o estado com o novo valor.

Observações importantes

• Execução no Servidor:
  Quando usado com frameworks que suportam React Server Components, o useActionState permite que formulários sejam interativos antes mesmo do JavaScript ser carregado no cliente.

• Assinatura da Função de Ação:
  A função passada para o useActionState recebe o estado anterior como primeiro argumento, diferentemente de uma ação de formulário tradicional.