Optimistic Update

樂觀更新

01你是不是遇到這個 / THE SYMPTOM

我按愛心 / 按讚 / 加入購物車的時候，畫面要等伺服器回應才會變，整個卡卡的、要等一兩秒。我想要一按下去畫面馬上反應，像沒在等網路一樣；如果後端真的失敗了再退回去就好。

↑ 如果你點頭了，你要的關鍵字就是 Optimistic Update。

02這是什麼 / DEFINITION

一種前端互動策略：使用者操作後，先假設請求會成功、立刻更新畫面，再背景送請求；萬一失敗才把畫面回滾到原狀並提示。

03什麼時候用 / WHEN TO USE

按讚、收藏、勾選待辦、刪除單筆、留言這類「幾乎一定會成功、且失敗可回滾」的輕量操作，想讓互動感覺即時。

04怎麼跟 AI 說 / HOW TO ASK

直接複製這句、貼進 Claude Code / Cursor / Copilot / ChatGPT：

幫我把按讚按鈕改成 optimistic update：點下去先立刻把畫面切成已按讚並 +1，背景再呼叫 API，如果 API 失敗就把狀態 rollback 回去並顯示錯誤。

05常見坑 / WATCH OUT

⚠ 別用在「失敗代價很高或無法回滾」的操作（如付款、送出訂單）——那種要等真正的結果。一定要寫好失敗時的 rollback，否則畫面會跟伺服器資料對不上。

06相關的詞 / RELATED

資料還在載入的時候，畫面整片空白、或只放一個轉圈圈，看起來很久、很像當掉。我想要在資料還沒來之前，先顯示一個跟最終版面長得差不多的灰色佔位框，讓人覺得快要好了。

我在 React 寫表單，想即時拿到使用者打的字、或想在送出前先驗證 / 限制只能打數字 / 即時顯示字數，但搞不清楚到底該用 value 還是 defaultValue，有時還跳「input 從 uncontrolled 變 controlled」的警告。