React 19 useOptimistic로 스피너 지옥 끝내기

import { useOptimistic, useState, useTransition } from "react";

type LikeState = {
  liked: boolean;
  count: number;
};

async function apiToggleLike(postId: string): Promise<void> {
  const res = await fetch(`/api/posts/${postId}/like`, { method: "POST" });
  if (!res.ok) throw new Error("toggle like failed");
}

export function LikeButton(props: { postId: string; initial: LikeState }) {
  const [base, setBase] = useState<LikeState>(props.initial);
  const [isPending, startTransition] = useTransition();

  const [optimistic, applyOptimistic] = useOptimistic(
    base,
    (current, next: { type: "toggle" }) => {
      if (next.type !== "toggle") return current;
      const liked = !current.liked;
      return {
        liked,
        count: current.count + (liked ? 1 : -1)
      };
    }
  );

  const onToggle = () => {
    // 1) UI 먼저 반영
    applyOptimistic({ type: "toggle" });

    // 2) 서버 요청은 transition으로 감싸서 UI 우선권 유지
    startTransition(async () => {
      try {
        await apiToggleLike(props.postId);
        // 3) 성공하면 base를 optimistic과 맞춰 확정
        setBase(optimistic);
      } catch {
        // 4) 실패하면 base를 그대로 두면 다음 렌더에서 자동 롤백
        // 필요하면 토스트/알림
      }
    });
  };

  return (
    <button onClick={onToggle} aria-busy={isPending}>
      {optimistic.liked ? "♥" : "♡"} {optimistic.count}
    </button>
  );
}

catch (e) {
  toast.error("요청에 실패했어요. 잠시 후 다시 시도해 주세요.");
}

import { useOptimistic, useState, useTransition } from "react";

type Comment = {
  id: string;
  body: string;
  createdAt: string;
  pending?: boolean;
};

async function apiCreateComment(postId: string, body: string): Promise<Comment> {
  const res = await fetch(`/api/posts/${postId}/comments`, {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ body })
  });
  if (!res.ok) throw new Error("create comment failed");
  return res.json();
}

export function CommentBox(props: { postId: string; initial: Comment[] }) {
  const [base, setBase] = useState<Comment[]>(props.initial);
  const [isPending, startTransition] = useTransition();

  const [optimistic, applyOptimistic] = useOptimistic(
    base,
    (
      current,
      action:
        | { type: "add"; comment: Comment }
        | { type: "replace"; tempId: string; saved: Comment }
        | { type: "remove"; id: string }
    ) => {
      switch (action.type) {
        case "add":
          return [action.comment, ...current];
        case "replace":
          return current.map((c) =>
            c.id === action.tempId ? { ...action.saved, pending: false } : c
          );
        case "remove":
          return current.filter((c) => c.id !== action.id);
        default:
          return current;
      }
    }
  );

  const onSubmit = (body: string) => {
    const tempId = `temp_${crypto.randomUUID()}`;
    const temp: Comment = {
      id: tempId,
      body,
      createdAt: new Date().toISOString(),
      pending: true
    };

    applyOptimistic({ type: "add", comment: temp });

    startTransition(async () => {
      try {
        const saved = await apiCreateComment(props.postId, body);

        // optimistic 리스트에서 temp를 saved로 교체
        applyOptimistic({ type: "replace", tempId, saved });

        // base 확정(실무에서는 re-fetch로 대체 가능)
        setBase((prev) => [saved, ...prev]);
      } catch {
        // 실패하면 optimistic에서 temp 제거
        applyOptimistic({ type: "remove", id: tempId });
      }
    });
  };

  return (
    <section>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          const fd = new FormData(e.currentTarget);
          const body = String(fd.get("body") || "").trim();
          if (!body) return;
          onSubmit(body);
          e.currentTarget.reset();
        }}
      >
        <input name="body" placeholder="댓글을 입력" />
        <button type="submit" aria-busy={isPending}>
          등록
        </button>
      </form>

      <ul>
        {optimistic.map((c) => (
          <li key={c.id}>
            {c.pending ? "(전송중) " : ""}
            {c.body}
          </li>
        ))}
      </ul>
    </section>
  );
}

type Action =
  | { type: "add"; comment: { id: string; body: string; createdAt: string; pending?: boolean } }
  | { type: "remove"; id: string };

const action = {
  type: "remove",
  id: "temp_123"
} satisfies Action;

<button onClick={onToggle} disabled={isPending}>
  ...
</button>