React 19 useOptimistic로 렌더링 폭주 잡기

'use client';

import * as React from 'react';

type Todo = {
  id: string;
  title: string;
  done: boolean;
  updatedAt: number;
};

type OptimisticPatch =
  | { type: 'toggle'; id: string; nextDone: boolean; clientTs: number }
  | { type: 'replaceAll'; todos: Todo[] };

async function updateTodoDone(id: string, done: boolean) {
  // 실제로는 fetch 호출
  await new Promise((r) => setTimeout(r, 250));
  return { id, done, serverTs: Date.now() };
}

export function TodoList({ initialTodos }: { initialTodos: Todo[] }) {
  // 1) 확정 상태(서버 기반)
  const [todos, setTodos] = React.useState<Todo[]>(initialTodos);

  // 2) 낙관 상태(확정 상태 위에 patch 적용)
  const [optimisticTodos, applyOptimistic] = React.useOptimistic(
    todos,
    (current: Todo[], patch: OptimisticPatch) => {
      if (patch.type === 'replaceAll') return patch.todos;

      if (patch.type === 'toggle') {
        return current.map((t) =>
          t.id === patch.id
            ? { ...t, done: patch.nextDone, updatedAt: patch.clientTs }
            : t
        );
      }

      return current;
    }
  );

  const onToggle = async (id: string) => {
    const current = optimisticTodos.find((t) => t.id === id);
    if (!current) return;

    const nextDone = !current.done;
    const clientTs = Date.now();

    // A) UI는 즉시 반영(낙관 업데이트)
    applyOptimistic({ type: 'toggle', id, nextDone, clientTs });

    try {
      // B) 서버 요청
      const res = await updateTodoDone(id, nextDone);

      // C) 서버 확정 데이터로만 확정 상태 갱신
      //    여기서도 "최소 변경"만 적용하면 렌더링 범위를 줄이기 쉽습니다.
      setTodos((prev) =>
        prev.map((t) =>
          t.id === id
            ? { ...t, done: res.done, updatedAt: res.serverTs }
            : t
        )
      );
    } catch (e) {
      // 실패 시: 확정 상태는 건드리지 않았으므로
      // 상위에서 todos가 그대로면 낙관 레이어가 자연스럽게 원복됩니다.
      // 필요하면 에러 토스트만 띄우면 됩니다.
      console.error(e);
    }
  };

  return (
    <ul>
      {optimisticTodos.map((t) => (
        <li key={t.id}>
          <label>
            <input
              type="checkbox"
              checked={t.done}
              onChange={() => onToggle(t.id)}
            />
            {t.title}
          </label>
        </li>
      ))}
    </ul>
  );
}

'use client';

import * as React from 'react';

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

type Patch = { type: 'set'; liked: boolean; version: number };

async function apiSetLike(liked: boolean, version: number) {
  await new Promise((r) => setTimeout(r, Math.random() * 500));
  return { liked, version };
}

export function LikeButton() {
  const [state, setState] = React.useState<LikeState>({ liked: false, version: 0 });

  const [optimistic, applyOptimistic] = React.useOptimistic(
    state,
    (current: LikeState, patch: Patch) => {
      if (patch.type === 'set') return { liked: patch.liked, version: patch.version };
      return current;
    }
  );

  const inFlightVersionRef = React.useRef(0);

  const toggle = async () => {
    const nextLiked = !optimistic.liked;
    const nextVersion = optimistic.version + 1;

    // 낙관 반영
    applyOptimistic({ type: 'set', liked: nextLiked, version: nextVersion });

    // 최신 요청 버전 기록
    inFlightVersionRef.current = nextVersion;

    const res = await apiSetLike(nextLiked, nextVersion);

    // 최신 요청의 응답만 확정 상태에 반영
    if (res.version === inFlightVersionRef.current) {
      setState({ liked: res.liked, version: res.version });
    }
  };

  return (
    <button type="button" onClick={toggle}>
      {optimistic.liked ? 'Liked' : 'Like'}
    </button>
  );
}