Optimistic UI Lab
찜 하트 하나를 다섯 가지 방식으로 구현해 나란히 놓았습니다. 서버 지연을 조절하고, 연타나 “반영 중 반대 클릭” 시나리오를 다섯 카드에 동시에 쏴서 화면 전이와 요청 로그를 비교해 보세요.
1. 차단형 (원래 코드)
응답이 와야 하트가 바뀐다. 요청 중 클릭은 버려진다.
화면 🤍서버 🤍대기
화면 전이
요청 로그
—
2. 즉시 반영 (useState)
클릭마다 화면 먼저, 요청 1건. 응답이 화면을 덮어쓴다.
화면 🤍서버 🤍대기
화면 전이
요청 로그
—
3. useOptimistic만
debounce·abort 없이 Action만. 연타해도 마지막 의도만 남는다.
화면 🤍서버 🤍대기
화면 전이
요청 로그
—
4. + debounce 400ms
연타를 모아 마지막 의도만 보낸다. 반영 중 반대 클릭은?
화면 🤍서버 🤍대기
화면 전이
요청 로그
—
5. useOptimistic + abort
클릭 하나 = AbortController 하나. 롤백은 React 가 한다.
화면 🤍서버 🤍대기
화면 전이
요청 로그
—
❤️🤍 화면 전이 — 한 번 눌렀는데 세 칸 이상이면 깜빡임 전송 성공 실패 클라이언트 취소 취소했지만 서버는 처리함