Server Actions + useOptimistic

// Server Action
"use server";
export async function submitMessage(prevState, formData) {
  const text = formData.get("text");
  await saveToDatabase(text);
  return { success: true, data: { text } };
}

// Client Component
const [state, formAction, isPending] = useActionState(submitMessage, initialState);
const [optimistic, addOptimistic] = useOptimistic(messages, ...);

<form action={(formData) => {
  addOptimistic({ text: formData.get("text"), pending: true });
  formAction(formData);
}}>
  <input name="text" />
  <button disabled={isPending}>送信</button>
</form>