為什麼這篇值得一讀

Main axis vs cross axis: starts from writing-mode to explain why row vs column flips your whole mental model.
The math behind flex-grow: not 'bigger number gets more space' — it's proportional distribution of remaining space, animated step by step.
flex-shrink vs flex-basis: why flex: 1 isn't width: 100% , and why min-width: 0 keeps showing up inside flex items.
Common traps: default min-width on flex containers, children forcing overflow, gap vs margin trade-offs.

即使你主寫 Vue／Nuxt，React 的 useEffect 心智模型還是現代前端的基礎課。Dan Abramov（React core team）這篇 2019 年長文是英文圈公認「讀懂 React 的分水嶺」——把 hooks 背後的 closure 與 render 模型完整拆開。雖然 React 後來加了 Server Components，但這篇的基本論點在 2026 年仍然適用。

文章涵蓋

每次 render 都是獨立快照：effect 裡讀到的 state、props，是當次 render 被「固定」下來的，不是 live reference。這解釋了為什麼 setInterval 裡的 count 會卡住。
Dependency array 不是最佳化：它是同步性的宣告——「這個 effect 對 X、Y 有依賴，X、Y 變了就要重跑」。寫漏依賴，行為就錯。
為什麼不要對 effect 說謊：lint rule 不是囉嗦，是防止你用閉包陷阱 debug 到天亮。
Race condition 處理：async effect 的 cleanup 該怎麼寫、為什麼 cancel flag 很重要。
useReducer 讓 effect 解耦：把「做什麼」和「怎麼取依賴」分開，effect 的 deps 變少、邏輯變清楚。

為什麼 Vue 工程師也該讀

Vue 3 的 watchEffect 與 React 的 useEffect 心智模型不同（Vue 是響應式追蹤、React 是依賴陣列），但「reactivity 出問題時怎麼 debug」的思考方式很共通。讀完後再看 Vue 的 watch／watchEffect，會更清楚為什麼 Vue 團隊選擇自動追蹤——正是要避開 React hooks 的心智負擔。

延伸

同站還有 Dan 的〈Why Isn't X a Hook〉〈Before You memo()〉等短文，都是把 hooks 設計哲學講清楚的好材料。