dream-image/use-react-effect

use-react-effect 是做什麼的？

Codex 技能，用於正確的 React Effect 使用、重構與審查

概述

此技能提供 Codex 代理關於 React Effect（特別是 useEffect、useLayoutEffect）的正確使用方式、常見錯誤的偵測與自動重構、以及程式碼審查的最佳實務。

使用方式

將此技能加入您的 Codex 專案後，代理會自動根據 context 觸發以下行為：

• 撰寫新 Effect 時：提供正確的相依性陣列、清理函式與條件式執行。
• 重構現有 Effect 時：偵測遺漏的 dependencies、不必要的 effect、以及可改用 useMemo 或 useCallback 的情況。
• 程式碼審查時：標記潛在問題並給出修正建議。

支援平台

• Codex CLI
• Codex IDE 插件
• 任何支援 SKILL.md 的 AI 代理工具

範例

假設您有一段如下的 Effect：

useEffect(() => {
  fetch('/api/data').then(setData);
}, []);

此技能會建議加入 setData 到相依性陣列，或標記它是否為穩定函式。

最佳實務

1. 總是將所有被 effect 使用的外部值加入相依性陣列。
2. 如果 effect 需要清理（如訂閱、計時器），務必回傳清理函式。
3. 避免將 effect 用於非同步初始化以外的邏輯——考慮使用自訂 hook 或 useMemo。

參考資源

• React useEffect 官方文件
• you-might-not-need-an-effect

---

此技能由 dream-image 維護。