useActionStateとuseOptimisticでフォーム送信を書き直す方法

export function Board() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [text, setText] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [isPending, setIsPending] = useState(false);

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setIsPending(true);
    const result = await postMessage(text);
    setIsPending(false);
    if (!result.ok) {
      setError(result.error);
      return;
    }
    setError(null);
    setMessages((prev) => [...prev, result.message]);
    setText('');
  }

  return (
    <form onSubmit={handleSubmit}>
      <ul>{messages.map((m) => <li key={m.id}>{m.text}</li>)}</ul>
      <input name="text" value={text} onChange={(e) => setText(e.target.value)} />
      <button disabled={isPending}>{isPending ? '送信中…' : '送信'}</button>
      {error && <p role="alert">{error}</p>}
    </form>
  );
}

export type State = { messages: Message[]; error: string | null };
export const initialState: State = { messages: [], error: null };

export async function sendAction(prev: State, formData: FormData): Promise<State> {
  const text = String(formData.get('text') ?? '');
  const result = await postMessage(text);
  if (!result.ok) return { ...prev, error: result.error };
  return { messages: [...prev.messages, result.message], error: null };
}

export function Board() {
  const [state, formAction, isPending] = useActionState(sendAction, initialState);

  return (
    <form action={formAction}>
      <ul>{state.messages.map((m) => <li key={m.id}>{m.text}</li>)}</ul>
      <input name="text" />
      <button disabled={isPending}>{isPending ? '送信中…' : '送信'}</button>
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

$ node run.mjs ./out/BoardOnSubmit.mjs
  1回目 送信直後: 一覧=[] 入力欄="こんにちは" ボタン="送信中…"(押せない) エラー=なし
  1回目 返事のあと: 一覧=[こんにちは] 入力欄="" ボタン="送信" エラー=なし
  2回目 送信直後: 一覧=[こんにちは] 入力欄="二十文字を超えるメッセージは保存されません" ボタン="送信中…"(押せない) エラー=なし
  2回目 返事のあと: 一覧=[こんにちは] 入力欄="二十文字を超えるメッセージは保存されません" ボタン="送信" エラー=20文字以内で入力してください

$ node run.mjs ./out/BoardActionState.mjs
  1回目 送信直後: 一覧=[] 入力欄="こんにちは" ボタン="送信中…"(押せない) エラー=なし
  1回目 返事のあと: 一覧=[こんにちは] 入力欄="" ボタン="送信" エラー=なし
  2回目 送信直後: 一覧=[こんにちは] 入力欄="二十文字を超えるメッセージは保存されません" ボタン="送信中…"(押せない) エラー=なし
  2回目 返事のあと: 一覧=[こんにちは] 入力欄="" ボタン="送信" エラー=20文字以内で入力してください

export function Board() {
  const [state, dispatch, isPending] = useActionState(sendAction, initialState);
  const [optimisticMessages, addOptimistic] = useOptimistic(
    state.messages,
    (current: Message[], text: string) => [...current, { id: -current.length - 1, text, sending: true }],
  );

  function formAction(formData: FormData) {
    addOptimistic(String(formData.get('text') ?? ''));
    dispatch(formData);
  }

  return (
    <form action={formAction}>
      <ul>
        {optimisticMessages.map((m) => (
          <li key={m.id}>{m.text}{m.sending && <small>（送信中）</small>}</li>
        ))}
      </ul>
      <input name="text" />
      <button>{isPending ? '送信（処理中）' : '送信'}</button>
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

$ node run.mjs ./out/BoardOptimistic.mjs
  1回目 送信直後: 一覧=[こんにちは（送信中）] 入力欄="こんにちは" ボタン="送信（処理中）" エラー=なし
  1回目 返事のあと: 一覧=[こんにちは] 入力欄="" ボタン="送信" エラー=なし
  2回目 送信直後: 一覧=[こんにちは, 二十文字を超えるメッセージは保存されません（送信中）] 入力欄="二十文字を超えるメッセージは保存されません" ボタン="送信（処理中）" エラー=なし
  2回目 返事のあと: 一覧=[こんにちは] 入力欄="" ボタン="送信" エラー=20文字以内で入力してください

// sendAction：state に draft を足し、エラーのときは送られた本文を入れる
if (!result.ok) return { ...prev, error: result.error, draft: text };
return { messages: [...prev.messages, result.message], error: null, draft: '' };

// Board：入力欄の初期値に draft を使う
<input name="text" defaultValue={state.draft} />

$ node run.mjs ./out/BoardKeepDraft.mjs
  2回目 送信直後: 一覧=[こんにちは, 二十文字を超えるメッセージは保存されません（送信中）] 入力欄="二十文字を超えるメッセージは保存されません" ボタン="送信（処理中）" エラー=なし
  2回目 返事のあと: 一覧=[こんにちは] 入力欄="二十文字を超えるメッセージは保存されません" ボタン="送信" エラー=20文字以内で入力してください

$ node queue.mjs ./out/BoardOptimistic.mjs
  2回送信した直後: 一覧=[1つ目（送信中）, 2つ目（送信中）] 返事待ち=1件 サーバーの記録=[受付:1つ目]
  1回目の返事のあと: 一覧=[1つ目（送信中）, 2つ目（送信中）] 返事待ち=1件 サーバーの記録=[受付:1つ目 → 保存:1つ目 → 受付:2つ目]
  2回目の返事のあと: 一覧=[1つ目, 2つ目] 返事待ち=0件 サーバーの記録=[受付:1つ目 → 保存:1つ目 → 受付:2つ目 → 保存:2つ目]