Could someone explain what's the difference and why are we using useOptimistic in the docs?
What are the benefits?

"use client";

import { useOptimistic } from "react";

const send = async (message: string) => {
  await new Promise((resolve) => setTimeout(resolve, 1000));
};

type Message = {
  message: string;
};

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

  return (
    <div>
      {optimisticMessages.map((m, k) => (
        <div key={k}>{m.message}</div>
      ))}
      <form
        action={async (formData: FormData) => {
          const message = formData.get("message");
          addOptimisticMessage(message);
          await send(message as string);
        }}
      >
        <input type="text" name="message" />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

vs

"use client";

import { useState } from "react";

const send = async (message: string) => {
  await new Promise((resolve) => setTimeout(resolve, 1000));

  return message;
};

type Message = {
  message: string;
};

export default function Home({
  initialMessages = [],
}: {
  initialMessages: Message[];
}) {
  const [messages, setMessages] = useState(initialMessages);

  return (
    <div>
      {messages.map((m, k) => (
        <div key={k}>{m.message}</div>
      ))}
      <form
        action={async (formData: FormData) => {
          const message = formData.get("message");
          setMessages((prev) => [...prev, { message: message as string }]);
          await send(message as string);
        }}
      >
        <input type="text" name="message" />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}