SKILL.md
readonlyread-only
name
react-useeffect
description
React useEffect 最佳實踐，來自官方文件。用於撰寫/審查 useEffect、useState 處理衍生值、資料擷取或狀態同步。教導何時不該使用 Effect 以及更好的替代方案。
你可能不需要 Effect
Effect 是 React 的逃生艙。它們讓你可以與外部系統同步。如果沒有涉及外部系統，你就不應該使用 Effect。
快速參考
| 情境 | 不要這樣做 | 正確做法 |
|---|---|---|
| 從 props/state 衍生狀態 | useState + useEffect |
在渲染期間計算 |
| 昂貴的計算 | useEffect 來快取 |
useMemo |
| 當 prop 改變時重置狀態 | useEffect 搭配 setState |
key prop |
| 使用者事件回應 | useEffect 監聽 state |
直接使用事件處理器 |
| 通知父層變更 | useEffect 呼叫 onChange |
在事件處理器中呼叫 |
| 擷取資料 | useEffect 沒有清理 |
useEffect 有清理或使用框架 |
何時需要 Effect
- 與外部系統同步（非 React 元件、瀏覽器 API）
- 訂閱外部儲存（盡可能使用
useSyncExternalStore） - 因為元件顯示而執行的分析/記錄
- 有適當清理的資料擷取（或使用框架內建機制）
何時不需要 Effect
- 轉換資料以進行渲染 - 在頂層計算，會自動重新執行
- 處理使用者事件 - 使用事件處理器，你確切知道發生了什麼
- 衍生狀態 - 直接計算：
const fullName = firstName + ' ' + lastName - 串聯狀態更新 - 在事件處理器中計算所有下一個狀態
決策樹
需要回應某件事嗎？
├── 使用者互動（點擊、提交、拖曳）？
│ └── 使用事件處理器
├── 元件出現在螢幕上？
│ └── 使用 Effect（外部同步、分析）
├── Props/state 改變且需要衍生值？
│ └── 在渲染期間計算
│ └── 昂貴？使用 useMemo
└── 當 prop 改變時需要重置狀態？
└── 在元件上使用 key prop
