Derived State
衍生狀態(計算值)
01你是不是遇到這個 / THE SYMPTOM
我把「總價」「篩選後的清單」「有沒有錯誤」這種其實可以從別的資料算出來的東西,也另外存成一個變數,結果原始資料變了、這個變數忘了更新就出錯。
↑ 如果你點頭了,你要的關鍵字就是 Derived State。
02這是什麼 / DEFINITION
凡是能從現有 state 算出來的值,就不要另外存一份 state,而是每次渲染時即時算出來。
03什麼時候用 / WHEN TO USE
當你發現某個 state 永遠是「另一個 state 算出來的結果」(總和、過濾、排序、布林判斷),而你卻要手動同步它的時候。
04怎麼跟 AI 說 / HOW TO ASK
直接複製這句、貼進 Claude Code / Cursor / Copilot / ChatGPT:
這個值其實可以從現有資料即時算出來,不該另外存成 state,幫我改成 derived state(用 useMemo 或直接在 render 算),移掉多餘的 useState 和同步邏輯。
05常見坑 / WATCH OUT
⚠ 判準:問自己「這個值能不能用別的 state 算出來?」能的話就別存。常見反例是用 useEffect 監聽 A 去 setState B,那幾乎都是該改成 derived state 的訊號。
06相關的詞 / RELATED