这个案例中，我们将使用 useOptimistic 这个 hook 来实现一个乐观锁更新，配合ServerAction组件一起使用，实现一个消息发送功能

"use client";

import { SubmitButton } from "@/components/ui/SubmitButton";
import { useOptimistic } from "react";
import { Message, send } from "./action";

export function Thread({ messages }: { messages: Message[] }) {
  const [optimisticMessages, addOptimisticMessage] = useOptimistic<
    Message[],
    string
  >(messages, (state, newMessage) => [
    ...state,
    { message: newMessage, state: "loading" },
  ]);

  const formAction = async (formData: FormData) => {
    const message = formData.get("message") as string;
    addOptimisticMessage(message);
    await send(message);
  };

  return (
    <div>
      <ul>
        {optimisticMessages.map((m, i) => (
          <li key={i}>
            {m.message}
            {m.state && `(${m.state})`}
          </li>
        ))}
      </ul>
      <form action={formAction}>
        <input className="input" type="text" name="message" />
        <SubmitButton />
      </form>
    </div>
  );
}