보내면 즉시 표시(전송 중) 후 저장 완료 시 확정 - form action과 결합
한 줄 요약 - 서버 응답을 기다리지 않고 화면을 먼저 바꿔(전송 중 표시) 빠르게 느껴지게 하고, 저장이 끝나면 확정합니다.
좋아요/댓글/할 일 추가처럼 결과가 거의 항상 성공하는 동작에서, 응답을 기다리는 빈 시간을 없애고 싶을 때.
useOptimistic(실제상태, 합치는함수)로 화면용 값을 만든다.
form action 안에서 addOptimistic으로 임시 항목을 먼저 추가.
서버 저장이 끝나면 실제 상태를 갱신해 임시값이 실제값으로 정착.
로딩/임시 상태를 직접 관리하지 않습니다. React가 action이 끝날 때까지 임시값을 유지하고 자동으로 되돌립니다.
실패 가능성이 높은 작업엔 부적합(되돌림 UX 필요).
React 19 + 클라이언트 컴포넌트 필요.
채팅/댓글 전송, 좋아요 토글, 장바구니 담기
import type { Metadata } from "next";
import { OptimisticUiDemo } from "./-components/OptimisticUiDemo";
export const metadata: Metadata = {
title: "React 19 Optimistic UI (데모)",
description:
"useOptimistic으로 서버 응답을 기다리지 않고 화면을 먼저 바꾸는 낙관적 업데이트. 전송 중 상태 표시 + 완료 후 확정까지 React 19 form action으로.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-white">
<OptimisticUiDemo />
</main>
);
}