Formulários Otimistas

Q: O que useOptimistic retorna e como você o usa?

Retorna [optimisticState, setOptimistic] optimisticState reflete o estado temporário da UI enquanto uma ação está pendente Chame setOptimistic(value) dentro de uma ação de formulário ou startTransition para aplicar a atualização otimista

Q: Por que setOptimistic deve ser chamado dentro de uma transição?

useOptimistic só produz estado temporário durante uma transição pendente Chamar setOptimistic fora de uma ação de formulário ou startTransition não tem efeito Ações de formulário criam transições automaticamente, então envolver com startTransition só é necessário fora dos formulários

Q: Como mostrar um estado visual "pendente" para itens otimistas?

Adicione uma flag pending a itens otimistas e estilize-os de forma diferente (opacidade, rótulo)

Q: Como funciona a função atualizadora estilo reducer em useOptimistic?

O atualizador recebe (currentState, actionPayload) e retorna o novo estado otimista Use uma união discriminada para tipos de ação: { type: "add"; message: Message } | { type: "delete"; id: string } Chamadas sequenciais se compõem corretamente porque cada uma recebe o estado otimista mais recente

Q: Por que a função atualizadora deve retornar o mesmo tipo do primeiro argumento?

O TypeScript garante que (state: T, action: A) => T - o tipo de retorno corresponde ao tipo de estado Isso evita retornar acidentalmente uma forma diferente O parâmetro genérico garante a consistência de tipo entre o estado do servidor e o estado otimista

Q: Como formRef.current?.reset() fornece feedback instantâneo?

Chamar reset() imediatamente após setOptimistic limpa o campo de entrada O usuário vê sua mensagem aparecer na lista e a entrada ser limpa instantaneamente Se a ação falhar, a mensagem otimista desaparece via rollback automático

Use useOptimistic com formulários para mostrar feedback instantâneo enquanto as ações do servidor processam - com UI pendente e rollback automático em caso de falha.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

"use client";
 
import { useOptimistic, useActionState } from "react";
 
type Todo = { id: string; text: string; completed: boolean };
 
function TodoList({
  todos,
  toggleAction,
}: {
  todos: Todo[];
  toggleAction: (formData: FormData) => Promise<void>;
}) {
  const [optimisticTodos, setOptimistic] = useOptimistic(
    todos,
    (state, toggledId: string) =>
      state.map((t) => (t.id === toggledId ? { ...t, completed: !t.completed } : t))
  );
 
  return (
    <ul>
      {optimisticTodos.map((todo) => (
        <li key={todo.id}>
          <form
            action={async (formData) => {
              setOptimistic(todo.id);
              await toggleAction(formData);
            }}
          >
            <input type="hidden" name="id" value={todo.id} />
            <button type="submit" className={todo.completed ? "line-through opacity-50" : ""}>
              {todo.text}
            </button>
          </form>
        </li>
      ))}
    </ul>
  );
}

Quando usar isso: Quando a ação do servidor provavelmente terá sucesso e você quer que a UI pareça instantânea - alternar, curtir, excluir ou reordenar itens.

Exemplo de Trabalho

// app/actions/messages.ts
"use server";
 
import { revalidatePath } from "next/cache";
 
export type Message = {
  id: string;
  text: string;
  author: string;
  createdAt: string;
  pending?: boolean;
};
 
export async function addMessage(prevState: any, formData: FormData) {
  const text = formData.get("text") as string;
  if (!text?.trim()) return { error: "A mensagem não pode estar vazia" };
 
  // Simula atraso de rede
  await new Promise((r) => setTimeout(r, 1500));
 
  // Simula falha ocasional
  if (Math.random() < 0.2) {
    return { error: "Falha ao enviar. Tente novamente." };
  }
 
  await db.message.create({
    data: { text, author: "You", createdAt: new Date().toISOString() },
  });
 
  revalidatePath("/chat");
  return { success: true };
}
 
export async function deleteMessage(formData: FormData) {
  const id = formData.get("id") as string;
  await db.message.delete({ where: { id } });
  revalidatePath("/chat");
}

// app/chat/page.tsx
"use client";
 
import { useOptimistic, useActionState, useRef } from "react";
import { addMessage, deleteMessage, type Message } from "@/app/actions/messages";
 
export function ChatRoom({ messages }: { messages: Message[] }) {
  const formRef = useRef<HTMLFormElement>(null);
 
  const [optimisticMessages, addOptimistic] = useOptimistic(
    messages,
    (state, action: { type: "add"; message: Message } | { type: "delete"; id: string }) => {
      if (action.type === "add") return [...state, action.message];
      if (action.type === "delete") return state.filter((m) => m.id !== action.id);
      return state;
    }
  );
 
  const [sendState, sendAction, isSending] = useActionState(
    async (prev: any, formData: FormData) => {
      const text = formData.get("text") as string;
      addOptimistic({
        type: "add",
        message: {
          id: `temp-${Date.now()}`,
          text,
          author: "You",
          createdAt: new Date().toISOString(),
          pending: true,
        },
      });
      formRef.current?.reset();
      return addMessage(prev, formData);
    },
    null
  );
 
  return (
    <div className="mx-auto max-w-lg">
      <div className="space-y-3 rounded border p-4" style={{ minHeight: 300 }}>
        {optimisticMessages.map((msg) => (
          <div
            key={msg.id}
            className={`flex items-start justify-between rounded p-2 ${
              msg.pending ? "bg-blue-50 opacity-60" : "bg-gray-50"
            }`}
          >
            <div>
              <span className="text-xs font-medium text-gray-500">{msg.author}</span>
              <p className="text-sm">{msg.text}</p>
              {msg.pending && <span className="text-xs text-blue-500">Enviando...</span>}
            </div>
            {!msg.pending && (
              <form
                action={async (formData) => {
                  addOptimistic({ type: "delete", id: msg.id });
                  await deleteMessage(formData);
                }}
              >
                <input type="hidden" name="id" value={msg.id} />
                <button type="submit" className="text-xs text-red-400 hover:text-red-600">
                  Excluir
                </button>
              </form>
            )}
          </div>
        ))}
      </div>
 
      {sendState?.error && (
        <p className="mt-2 text-sm text-red-600">{sendState.error}</p>
      )}
 
      <form ref={formRef} action={sendAction} className="mt-3 flex gap-2">
        <input
          name="text"
          placeholder="Digite uma mensagem..."
          className="flex-1 rounded border p-2"
          required
        />
        <button
          type="submit"
          disabled={isSending}
          className="rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50"
        >
          Enviar
        </button>
      </form>
    </div>
  );
}

O que isso demonstra:

useOptimistic com um atualizador estilo reducer para ações de adicionar e excluir
Estado visual pendente (opacidade, rótulo "Enviando...")
Rollback automático quando a ação do servidor falha - React reverte para a prop messages real
Reset do formulário imediatamente após a atualização otimista
Exibição de erro para ações falhas

Mergulho Profundo

Como Funciona

useOptimistic(serverState, updaterFn) retorna [optimisticState, setOptimistic]
Quando setOptimistic(value) é chamado, React aplica a função atualizadora para produzir um estado temporário
O estado otimista é exibido enquanto a ação assíncrona (ação de formulário ou transição) está pendente
Quando a ação é concluída, React substitui o estado otimista pelo novo serverState da prop/pai
Se a ação falhar, o estado otimista reverte automaticamente para o serverState original
useOptimistic só funciona dentro de uma transição (ação de formulário ou startTransition)

Variações

Botão de curtir com contagem otimista:

function LikeButton({ postId, likes, isLiked }: { postId: string; likes: number; isLiked: boolean }) {
  const [optimistic, setOptimistic] = useOptimistic(
    { likes, isLiked },
    (state, _: void) => ({
      likes: state.isLiked ? state.likes - 1 : state.likes + 1,
      isLiked: !state.isLiked,
    })
  );
 
  return (
    <form action={async () => {
      setOptimistic(undefined);
      await toggleLike(postId);
    }}>
      <button type="submit">
        {optimistic.isLiked ? "heart-filled" : "heart"} {optimistic.likes}
      </button>
    </form>
  );
}

Reordenação otimista:

const [optimisticItems, reorder] = useOptimistic(
  items,
  (state, { from, to }: { from: number; to: number }) => {
    const next = [...state];
    const [moved] = next.splice(from, 1);
    next.splice(to, 0, moved);
    return next;
  }
);

Notas TypeScript

// useOptimistic é genérico
const [state, setState] = useOptimistic<Message[], { type: "add"; message: Message }>(
  messages,
  (state, action) => {
    // action é tipado como { type: "add"; message: Message }
    return [...state, action.message];
  }
);
 
// A função atualizadora deve retornar o mesmo tipo do primeiro argumento
// (state: Message[], action: Action) => Message[]

Armadilhas

Só funciona em transições - Chamar setOptimistic fora de uma ação de formulário ou startTransition não tem efeito. Correção: Certifique-se de chamá-lo dentro de uma ação de formulário assíncrona ou envolva com startTransition.
Rollback substitui todo o estado - Quando a ação falha, todo o estado otimista reverte, não apenas o item falho. Este é o comportamento correto, mas pode surpreendê-lo se várias ações estiverem em andamento.
Nenhuma API de rollback manual - Você não pode reverter manualmente o estado otimista. Correção: O rollback automático lida com falhas. Para controle manual, use useState regular com try/catch.
Closure obsoleto no atualizador - O atualizador recebe o estado otimista atual (incluindo atualizações otimistas anteriores), então chamadas sequenciais se compõem corretamente. Mas evite fechar sobre estado externo.
Re-renderização do componente servidor necessária - Após a conclusão da ação, o componente servidor pai deve re-renderizar com novos dados (via revalidatePath ou revalidateTag) para que o estado otimista se resolva corretamente.

Alternativas

Alternativa	Use Quando	Não Use Quando
`useState` + try/catch	Você precisa de controle de rollback manual	Você quer rollback automático
SWR `optimisticData`	Você usa SWR para buscar dados	Você usa Componentes de Servidor e ações
TanStack Query `onMutate`	Você usa TanStack Query com atualizações otimistas	Você usa o padrão App Router
Sem UI otimista	A ação é rápida (menos de 200ms) ou a falha é provável	Usuários percebem lentidão e a ação geralmente tem sucesso

FAQs

O que useOptimistic retorna e como você o usa?

Retorna [optimisticState, setOptimistic]
optimisticState reflete o estado temporário da UI enquanto uma ação está pendente
Chame setOptimistic(value) dentro de uma ação de formulário ou startTransition para aplicar a atualização otimista

Como funciona o rollback automático quando uma ação do servidor falha?

Quando a ação é concluída (sucesso ou falha), React substitui o estado otimista pela prop serverState real
Se a ação falhar, as alterações otimistas são descartadas e a UI reverte automaticamente
Você não precisa escrever nenhuma lógica de rollback por conta própria

Por que setOptimistic deve ser chamado dentro de uma transição?

useOptimistic só produz estado temporário durante uma transição pendente
Chamar setOptimistic fora de uma ação de formulário ou startTransition não tem efeito
Ações de formulário criam transições automaticamente, então envolver com startTransition só é necessário fora dos formulários

Como mostrar um estado visual "pendente" para itens otimistas?

const message = { ...data, id: `temp-${Date.now()}`, pending: true };
addOptimistic({ type: "add", message });
 
// Na UI:
{msg.pending && <span className="text-blue-500">Enviando...</span>}

Adicione uma flag pending a itens otimistas e estilize-os de forma diferente (opacidade, rótulo)

Como funciona a função atualizadora estilo reducer em useOptimistic?

O atualizador recebe (currentState, actionPayload) e retorna o novo estado otimista
Use uma união discriminada para tipos de ação: { type: "add"; message: Message } | { type: "delete"; id: string }
Chamadas sequenciais se compõem corretamente porque cada uma recebe o estado otimista mais recente

Armadilha: O que acontece quando várias ações otimistas estão em andamento e uma falha?

O rollback substitui todo o estado otimista, não apenas o item falho
Todas as alterações otimistas pendentes revertem quando React resolve para o estado real do servidor
Este é um comportamento esperado, mas pode surpreendê-lo se vários itens estiverem sendo modificados

Armadilha: Por que useOptimistic requer que o componente servidor pai re-renderize?

Após a conclusão da ação, os dados reais devem vir do servidor através de um novo valor de prop
Chame revalidatePath ou revalidateTag na ação do servidor para acionar uma re-renderização
Sem revalidação, o estado otimista se resolve para dados obsoletos

Como você tipa o hook useOptimistic com genéricos TypeScript?

const [state, setState] = useOptimistic<
  Message[],
  { type: "add"; message: Message } | { type: "delete"; id: string }
>(messages, (state, action) => {
  // action é totalmente tipado
  if (action.type === "add") return [...state, action.message];
  if (action.type === "delete") return state.filter(m => m.id !== action.id);
  return state;
});

Por que a função atualizadora deve retornar o mesmo tipo do primeiro argumento?

O TypeScript garante que (state: T, action: A) => T - o tipo de retorno corresponde ao tipo de estado
Isso evita retornar acidentalmente uma forma diferente
O parâmetro genérico garante a consistência de tipo entre o estado do servidor e o estado otimista

Quando você deve pular a UI otimista e usar estados de carregamento regulares em vez disso?

Pule a UI otimista quando a ação for rápida (menos de 200ms) ou a falha for provável
Use-a quando a ação geralmente tem sucesso e os usuários percebem lentidão (por exemplo, alternar, curtir, excluir)
Para controle de rollback manual, use useState com try/catch em vez disso

Como formRef.current?.reset() fornece feedback instantâneo?

Chamar reset() imediatamente após setOptimistic limpa o campo de entrada
O usuário vê sua mensagem aparecer na lista e a entrada ser limpa instantaneamente
Se a ação falhar, a mensagem otimista desaparece via rollback automático

Relacionado

Formulários de Ação de Servidor - ações de servidor e useActionState
Padrões Básicos de Formulário - padrões de formulário padrão
Exibição de Erros de Formulário - exibindo erros de ações falhas
Acessibilidade de Formulário - anunciando mudanças de estado

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

"use client";
 
import { useOptimistic, useActionState } from "react";
 
type Todo = { id: string; text: string; completed: boolean };
 
function TodoList({
  todos,
  toggleAction,
}: {
  todos: Todo[];
  toggleAction: (formData: FormData) => Promise<void>;
}) {
  const [optimisticTodos, setOptimistic] = useOptimistic(
    todos,
    (state, toggledId: string) =>
      state.map((t) => (t.id === toggledId ? { ...t, completed: !t.completed } : t))
  );
 
  return (
    <ul>
      {optimisticTodos.map((todo) => (
        <li key={todo.id}>
          <form
            action={async (formData) => {
              setOptimistic(todo.id);
              await toggleAction(formData);
            }}
          >
            <input type="hidden" name="id" value={todo.id} />
            <button type="submit" className={todo.completed ? "line-through opacity-50" : ""}>
              {todo.text}
            </button>
          </form>
        </li>
      ))}
    </ul>
  );
}

Quando usar isso: Quando a ação do servidor provavelmente terá sucesso e você quer que a UI pareça instantânea - alternar, curtir, excluir ou reordenar itens.

Exemplo de Trabalho

// app/actions/messages.ts
"use server";
 
import { revalidatePath } from "next/cache";
 
export type Message = {
  id: string;
  text: string;
  author: string;
  createdAt: string;
  pending?: boolean;
};
 
export async function addMessage(prevState: any, formData: FormData) {
  const text = formData.get("text") as string;
  if (!text?.trim()) return { error: "A mensagem não pode estar vazia" };
 
  // Simula atraso de rede
  await new Promise((r) => setTimeout(r, 1500));
 
  // Simula falha ocasional
  if (Math.random() < 0.2) {
    return { error: "Falha ao enviar. Tente novamente." };
  }
 
  await db.message.create({
    data: { text, author: "You", createdAt: new Date().toISOString() },
  });
 
  revalidatePath("/chat");
  return { success: true };
}
 
export async function deleteMessage(formData: FormData) {
  const id = formData.get("id") as string;
  await db.message.delete({ where: { id } });
  revalidatePath("/chat");
}

// app/chat/page.tsx
"use client";
 
import { useOptimistic, useActionState, useRef } from "react";
import { addMessage, deleteMessage, type Message } from "@/app/actions/messages";
 
export function ChatRoom({ messages }: { messages: Message[] }) {
  const formRef = useRef<HTMLFormElement>(null);
 
  const [optimisticMessages, addOptimistic] = useOptimistic(
    messages,
    (state, action: { type: "add"; message: Message } | { type: "delete"; id: string }) => {
      if (action.type === "add") return [...state, action.message];
      if (action.type === "delete") return state.filter((m) => m.id !== action.id);
      return state;
    }
  );
 
  const [sendState, sendAction, isSending] = useActionState(
    async (prev: any, formData: FormData) => {
      const text = formData.get("text") as string;
      addOptimistic({
        type: "add",
        message: {
          id: `temp-${Date.now()}`,
          text,
          author: "You",
          createdAt: new Date().toISOString(),
          pending: true,
        },
      });
      formRef.current?.reset();
      return addMessage(prev, formData);
    },
    null
  );
 
  return (
    <div className="mx-auto max-w-lg">
      <div className="space-y-3 rounded border p-4" style={{ minHeight: 300 }}>
        {optimisticMessages.map((msg) => (
          <div
            key={msg.id}
            className={`flex items-start justify-between rounded p-2 ${
              msg.pending ? "bg-blue-50 opacity-60" : "bg-gray-50"
            }`}
          >
            <div>
              <span className="text-xs font-medium text-gray-500">{msg.author}</span>
              <p className="text-sm">{msg.text}</p>
              {msg.pending && <span className="text-xs text-blue-500">Enviando...</span>}
            </div>
            {!msg.pending && (
              <form
                action={async (formData) => {
                  addOptimistic({ type: "delete", id: msg.id });
                  await deleteMessage(formData);
                }}
              >
                <input type="hidden" name="id" value={msg.id} />
                <button type="submit" className="text-xs text-red-400 hover:text-red-600">
                  Excluir
                </button>
              </form>
            )}
          </div>
        ))}
      </div>
 
      {sendState?.error && (
        <p className="mt-2 text-sm text-red-600">{sendState.error}</p>
      )}
 
      <form ref={formRef} action={sendAction} className="mt-3 flex gap-2">
        <input
          name="text"
          placeholder="Digite uma mensagem..."
          className="flex-1 rounded border p-2"
          required
        />
        <button
          type="submit"
          disabled={isSending}
          className="rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50"
        >
          Enviar
        </button>
      </form>
    </div>
  );
}

O que isso demonstra:

useOptimistic com um atualizador estilo reducer para ações de adicionar e excluir
Estado visual pendente (opacidade, rótulo "Enviando...")
Rollback automático quando a ação do servidor falha - React reverte para a prop messages real
Reset do formulário imediatamente após a atualização otimista
Exibição de erro para ações falhas

Mergulho Profundo

Como Funciona

useOptimistic(serverState, updaterFn) retorna [optimisticState, setOptimistic]
Quando setOptimistic(value) é chamado, React aplica a função atualizadora para produzir um estado temporário
O estado otimista é exibido enquanto a ação assíncrona (ação de formulário ou transição) está pendente
Quando a ação é concluída, React substitui o estado otimista pelo novo serverState da prop/pai
Se a ação falhar, o estado otimista reverte automaticamente para o serverState original
useOptimistic só funciona dentro de uma transição (ação de formulário ou startTransition)

Variações

Botão de curtir com contagem otimista:

function LikeButton({ postId, likes, isLiked }: { postId: string; likes: number; isLiked: boolean }) {
  const [optimistic, setOptimistic] = useOptimistic(
    { likes, isLiked },
    (state, _: void) => ({
      likes: state.isLiked ? state.likes - 1 : state.likes + 1,
      isLiked: !state.isLiked,
    })
  );
 
  return (
    <form action={async () => {
      setOptimistic(undefined);
      await toggleLike(postId);
    }}>
      <button type="submit">
        {optimistic.isLiked ? "heart-filled" : "heart"} {optimistic.likes}
      </button>
    </form>
  );
}

Reordenação otimista:

const [optimisticItems, reorder] = useOptimistic(
  items,
  (state, { from, to }: { from: number; to: number }) => {
    const next = [...state];
    const [moved] = next.splice(from, 1);
    next.splice(to, 0, moved);
    return next;
  }
);

Notas TypeScript

// useOptimistic é genérico
const [state, setState] = useOptimistic<Message[], { type: "add"; message: Message }>(
  messages,
  (state, action) => {
    // action é tipado como { type: "add"; message: Message }
    return [...state, action.message];
  }
);
 
// A função atualizadora deve retornar o mesmo tipo do primeiro argumento
// (state: Message[], action: Action) => Message[]

Armadilhas

Só funciona em transições - Chamar setOptimistic fora de uma ação de formulário ou startTransition não tem efeito. Correção: Certifique-se de chamá-lo dentro de uma ação de formulário assíncrona ou envolva com startTransition.
Rollback substitui todo o estado - Quando a ação falha, todo o estado otimista reverte, não apenas o item falho. Este é o comportamento correto, mas pode surpreendê-lo se várias ações estiverem em andamento.
Nenhuma API de rollback manual - Você não pode reverter manualmente o estado otimista. Correção: O rollback automático lida com falhas. Para controle manual, use useState regular com try/catch.
Closure obsoleto no atualizador - O atualizador recebe o estado otimista atual (incluindo atualizações otimistas anteriores), então chamadas sequenciais se compõem corretamente. Mas evite fechar sobre estado externo.
Re-renderização do componente servidor necessária - Após a conclusão da ação, o componente servidor pai deve re-renderizar com novos dados (via revalidatePath ou revalidateTag) para que o estado otimista se resolva corretamente.

Alternativas

Alternativa	Use Quando	Não Use Quando
`useState` + try/catch	Você precisa de controle de rollback manual	Você quer rollback automático
SWR `optimisticData`	Você usa SWR para buscar dados	Você usa Componentes de Servidor e ações
TanStack Query `onMutate`	Você usa TanStack Query com atualizações otimistas	Você usa o padrão App Router
Sem UI otimista	A ação é rápida (menos de 200ms) ou a falha é provável	Usuários percebem lentidão e a ação geralmente tem sucesso

FAQs

O que useOptimistic retorna e como você o usa?

Retorna [optimisticState, setOptimistic]
optimisticState reflete o estado temporário da UI enquanto uma ação está pendente
Chame setOptimistic(value) dentro de uma ação de formulário ou startTransition para aplicar a atualização otimista

Como funciona o rollback automático quando uma ação do servidor falha?

Quando a ação é concluída (sucesso ou falha), React substitui o estado otimista pela prop serverState real
Se a ação falhar, as alterações otimistas são descartadas e a UI reverte automaticamente
Você não precisa escrever nenhuma lógica de rollback por conta própria

Por que setOptimistic deve ser chamado dentro de uma transição?

useOptimistic só produz estado temporário durante uma transição pendente
Chamar setOptimistic fora de uma ação de formulário ou startTransition não tem efeito
Ações de formulário criam transições automaticamente, então envolver com startTransition só é necessário fora dos formulários

Como mostrar um estado visual "pendente" para itens otimistas?

const message = { ...data, id: `temp-${Date.now()}`, pending: true };
addOptimistic({ type: "add", message });
 
// Na UI:
{msg.pending && <span className="text-blue-500">Enviando...</span>}

Adicione uma flag pending a itens otimistas e estilize-os de forma diferente (opacidade, rótulo)

Como funciona a função atualizadora estilo reducer em useOptimistic?

O atualizador recebe (currentState, actionPayload) e retorna o novo estado otimista
Use uma união discriminada para tipos de ação: { type: "add"; message: Message } | { type: "delete"; id: string }
Chamadas sequenciais se compõem corretamente porque cada uma recebe o estado otimista mais recente

Armadilha: O que acontece quando várias ações otimistas estão em andamento e uma falha?

O rollback substitui todo o estado otimista, não apenas o item falho
Todas as alterações otimistas pendentes revertem quando React resolve para o estado real do servidor
Este é um comportamento esperado, mas pode surpreendê-lo se vários itens estiverem sendo modificados

Armadilha: Por que useOptimistic requer que o componente servidor pai re-renderize?

Após a conclusão da ação, os dados reais devem vir do servidor através de um novo valor de prop
Chame revalidatePath ou revalidateTag na ação do servidor para acionar uma re-renderização
Sem revalidação, o estado otimista se resolve para dados obsoletos

Como você tipa o hook useOptimistic com genéricos TypeScript?

const [state, setState] = useOptimistic<
  Message[],
  { type: "add"; message: Message } | { type: "delete"; id: string }
>(messages, (state, action) => {
  // action é totalmente tipado
  if (action.type === "add") return [...state, action.message];
  if (action.type === "delete") return state.filter(m => m.id !== action.id);
  return state;
});

Por que a função atualizadora deve retornar o mesmo tipo do primeiro argumento?

O TypeScript garante que (state: T, action: A) => T - o tipo de retorno corresponde ao tipo de estado
Isso evita retornar acidentalmente uma forma diferente
O parâmetro genérico garante a consistência de tipo entre o estado do servidor e o estado otimista

Quando você deve pular a UI otimista e usar estados de carregamento regulares em vez disso?

Pule a UI otimista quando a ação for rápida (menos de 200ms) ou a falha for provável
Use-a quando a ação geralmente tem sucesso e os usuários percebem lentidão (por exemplo, alternar, curtir, excluir)
Para controle de rollback manual, use useState com try/catch em vez disso

Como formRef.current?.reset() fornece feedback instantâneo?

Chamar reset() imediatamente após setOptimistic limpa o campo de entrada
O usuário vê sua mensagem aparecer na lista e a entrada ser limpa instantaneamente
Se a ação falhar, a mensagem otimista desaparece via rollback automático

Relacionado

Formulários de Ação de Servidor - ações de servidor e useActionState
Padrões Básicos de Formulário - padrões de formulário padrão
Exibição de Erros de Formulário - exibindo erros de ações falhas
Acessibilidade de Formulário - anunciando mudanças de estado

Formulários Otimistas

Buscar na documentação

Formulários Otimistas