import { useActionState } from "react";

function UpdateNameForm() {
  const [error, submitAction, isPending] = useActionState(
    async (prevState, formData) => {
      const name = formData.get("name");
      const error = await updateName(name);
      if (error) {
        return error;
      }
      redirect("/profile");
      return null;
    },
    null
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

??? useActionState? ?? ??? ?? ??? ???? ??? ? ???? ?? ???? ?? ????.

2. useOptimistic? ??? ??? ????

??? UI ????? ?? ???? ??? ??? ???? ?? ?? ??? ?? ??? ? ????. ??? ??Optimistic ??? ???? ? ??? ??????.

?: ??? ?? ??

import { useOptimistic } from "react";

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName); // Show optimistic state
    const updatedName = await updateName(newName); // Wait for the async request
    onUpdateName(updatedName); // Update the actual state
  };

  return (
    <form action={submitAction}>
      <p>Your name: {optimisticName}</p>
      <input type="text" name="name" />
      <button type="submit">Change Name</button>
    </form>
  );
}

useOptimistic? ??? ???? ??? ????? ???? ??? ??? ??? ?????.

3. ?? ???? ?? ??? ?? ??

React 19? ?? ?? ??? ?? ?? ??? ?????. ??? ?? ?? ?? ??? ????? ?? ???? ?? ???? ?? ??? ???? ??? ? ????.

?: ?? ?? ??

Uncaught Error: Hydration failed because the server-rendered HTML didn’t match the client.
Tree mismatch:
+ Client: <span>Welcome</span>
- Server: <span>Hello</span>

??? ??? ???? ???? ??? ??? ????? ????? ? ??? ???.

4. ?? ?? ?? ? ?? ??

React ?? ?? ??(RSC)? ???? ?? ??? ???? ????? ??? ???? ? ????. ?? ??? ???? ????? ?? ???? ?? ??? ??? ??? ??? ? ????.

?: ?? ?? ??

// Server Component
export const fetchComments = async () => {
  const response = await fetch("/api/comments");
  return await response.json();
};

// Client Component
import { use } from "react";

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // Suspends until resolved
  return (
    <ul>
      {comments.map((comment) => (
        <li key={comment.id}>{comment.text}</li>
      ))}
    </ul>
  );
}

// Usage
function App() {
  return (
    <Suspense fallback={<p>Loading comments...</p>}>
      <Comments commentsPromise={fetchComments()} />
    </Suspense>
  );
}

?? ??? ????? ?? ?? ??? ?? ? ??? ???? ? ???? ??????.

5. ?? ????? ? ????? ??

React 19? ??