Skip to content

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