Como aplicar hook useActionState do React 19

O hook useActionState permite rastrear o estado pendente e o valor de retorno de uma função (chamada de “ação”). A função passada pode ser uma função de cliente JavaScript simples ou uma ação de servidor vinculada a uma referência no servidor. Ele aceita um initialState valor opcional usado para a renderização inicial.

function useActionState<State>(
        action: (state: Awaited<State>) => State | Promise<State>,
        initialState: Awaited<State>,
        permalink?: string,
    ): [state: Awaited<State>, dispatch: () => void, boolean];

O Hook vai retornar uma tupla com:

• state: o último estado que a ação retornou
• dispatch: o método a ser chamado para despachar a ação encapsulada
• pending: o estado pendente da ação e quaisquer atualizações de estado contidas

Exemplo de uso:

import { useActionState } from "react";

function Form() {
  function formAction(prevState, formData){
   // Ação que desejo realizar...
  }

  const [state, action, isPending] = useActionState(formAction, null);

  return (
    <form action={action}>
      <input type="email" name="email" disabled={isPending} />
      <button type="submit" disabled={isPending}>
        Submit
      </button>
      {state.errorMessage && <p>{state.errorMessage}</p>}
    </form>
  );
}

Mas não precisa ser usado com a <form/>

import { useActionState, useRef } from "react";

function Form({ someAction }) {
  const ref = useRef(null);
  const [state, action, isPending] = useActionState(someAction);

  async function handleSubmit() {

    await action({ email: ref.current.value });
  }

  return (
    <div>
      <input ref={ref} type="email" name="email" disabled={isPending} />
      <button onClick={handleSubmit} disabled={isPending}>
        Submit
      </button>
      {state.errorMessage && <p>{state.errorMessage}</p>}
    </div>
  );
}

Veja nosso video completo na pratica passo a passo como aplicar esses hooks como useActionState.