낙관적 업데이트를 적용했는데 왜 체크박스만 느릴까?

export function useToggleTask(scope: TaskScope, date: Date) {
  const queryClient = useQueryClient()
  const targetDate = getTargetDateForScope(scope, date)
 
  return useMutation({
    mutationFn: async ({ id, is_completed }) => {
      const { data } = await apiClient.patch<Task>(`/tasks/${id}`, {
        is_completed,
        completed_at: is_completed ? new Date().toISOString() : null,
      })
      return data
    },
    onMutate: async ({ id, is_completed }) => {
      await queryClient.cancelQueries({
        queryKey: taskKeys.byScope(scope, targetDate),
      })
      const previous = queryClient.getQueryData<Task[]>(
        taskKeys.byScope(scope, targetDate)
      )
      queryClient.setQueryData<Task[]>(
        taskKeys.byScope(scope, targetDate),
        (old) =>
          (old ?? []).map((task) =>
            task.id === id ? { ...task, is_completed } : task
          )
      )
      return { previous }
    },
    onError: (_err, _vars, context) => {
      if (context?.previous) {
        queryClient.setQueryData(
          taskKeys.byScope(scope, targetDate),
          context.previous
        )
      }
    },
    // ...
  })
}

// 읽기 (useTasks)
useQuery({ queryKey: taskKeys.byScope(scope, targetDate), ... })
 
// 쓰기 (useToggleTask의 onMutate)
queryClient.setQueryData(taskKeys.byScope(scope, targetDate), ...)

export function TaskCard({ task, onToggle, toggling, ... }) {
  return (
    <div
      className={cn(
        'flex gap-3 rounded-xl border bg-white p-4',
        task.is_completed && 'bg-zinc-50/80 opacity-80' // ← 즉시 반응
      )}
    >
      <input
        type="checkbox"
        checked={task.is_completed} // ← 이것도 즉시 바뀐 값
        disabled={toggling}         // ← 범인
        onChange={(e) => onToggle(task.id, e.target.checked)}
      />
      <h3 className={cn(task.is_completed && 'line-through')}>
        {task.title}
      </h3>
      {/* ... */}
    </div>
  )
}

const [togglingId, setTogglingId] = useState<string | null>(null)
 
const handleToggle = (id: string, done: boolean) => {
  setTogglingId(id)
  toggleTask.mutate(
    { id, is_completed: done },
    { onSettled: () => setTogglingId(null) } // API 응답이 와야 해제
  )
}

체크박스 클릭
→ setTogglingId(id)               : 체크박스 disabled 시작
→ onMutate                        : 캐시 즉시 갱신 (낙관적 업데이트)
→ 리렌더                          : 카드 스타일 즉시 변경 ✅
                                    체크박스도 checked 됐지만 disabled 상태 (회색/흐림)
→ ... API 왕복 대기 ...
→ onSettled → setTogglingId(null) : disabled 해제
→ 리렌더                          : 이제야 또렷한 체크 표시 ✅

<input
  type="checkbox"
  checked={task.is_completed}
  onChange={(e) => onToggle(task.id, e.target.checked)}
/>

A 클릭 → setTogglingId(A)
B 클릭 → setTogglingId(B)      : A 추적 유실
A 응답 → onSettled → setTogglingId(null) : 아직 진행 중인 B의 disabled까지 해제

// before
const handleToggle = (id: string, done: boolean) => {
  setTogglingId(id)
  toggleTask.mutate(
    { id, is_completed: done },
    { onSettled: () => setTogglingId(null) }
  )
}
 
// after
const handleToggle = (id: string, done: boolean) => {
  toggleTask.mutate({ id, is_completed: done })
}

// before
onSettled: () => {
  queryClient.invalidateQueries({
    queryKey: taskKeys.byScope(scope, targetDate),
  })
  queryClient.invalidateQueries({ queryKey: taskKeys.history() })
},

// after
onSuccess: (updated) => {
  queryClient.setQueryData<Task[]>(
    taskKeys.byScope(scope, targetDate),
    (old) =>
      (old ?? []).map((task) => (task.id === updated.id ? updated : task))
  )
},
onSettled: () => {
  // 완료/취소는 완료 기록 목록에 영향을 주지만 그 데이터는 응답에 없으므로
  // history 만 무효화한다.
  queryClient.invalidateQueries({ queryKey: taskKeys.history() })
},

1. "낙관적 업데이트가 안 먹는다"고 느껴질 때, 정말 안 먹는 경우
   (query key 불일치)와 데이터는 즉시 바뀌는데 다른 요인이 시각적
   반영을 막는 경우를 구분해야 한다.
 
2. 같은 데이터를 읽는 UI 조각들이 다르게 반응한다면, 데이터가 아니라
   각 조각의 렌더링 경로(disabled, transition, 조건부 스타일)를 봐야
   한다. 이번엔 disabled={toggling}이었다.
 
3. 낙관적 업데이트와 "응답까지 컨트롤 잠금"은 목적이 충돌한다.
   낙관적 업데이트가 있는 액션에서는 로딩 가드를 빼고,
   없는 액션(삭제 등)에는 남긴다.
 
4. 진행 중 상태를 단일 값(togglingId: string | null)으로 수동 추적하면
   동시 액션에서 경합이 생긴다. 필요 없어졌다면 지우고, 필요하다면
   mutation 자체의 상태를 쓰는 게 안전하다.
 
5. mutation 응답에 최신 데이터가 있다면 invalidateQueries 대신
   setQueryData로 해당 항목만 교체할 수 있다. 응답에 없는 연관
   데이터만 invalidate한다. 조회 경로에 부수효과(템플릿 시딩)가
   있다면 이 차이는 성능 이상의 의미가 있다.