什麼是 useEffect

是 React 內建的 Hook，用來在 Function Component 中處理副作用 (Side Effects)
讓我們在畫面渲染後，執行額外的程式邏輯

副作用 (Side Effects) 是什麼

會影響外部環境或需要與外界互動的動作

例如：

• 發送 API 請求：像是獲取資料 (fetch)
• DOM 操作：像是修改瀏覽器標題 (document.title)
• 計時器：像是設定 (setTimeout)、清除 (setInterval)
• 訂閱或監聽事件：WebSocket、addEventListener

什麼時候會用到 useEffect

• 元件載入時（只執行一次）
  常用於初始化，例如剛在入頁面時就要抓取API資料
• 當state或props改變時
  可以指定依賴項dependencies ，當特定值變動時，同時執行副作用
• 清除副作用
  在元件卸載前，或下一次effect執行前，清理先前的副作用，避免記憶體洩漏或重複操作

useEffect(() => {
   (...side effect)
}, [dependency]);

依賴項 (dependency)：觸發條件

• 如果裡面的變數有改變，useEffect 就會再次執行
• 如果沒有裡面的變數沒有改變，useEffect 就不會重複執行

useEffect 什麼時候會執行？

• 沒有依賴陣列 → 在元件的每一次渲染後都會執行
• 空的依賴陣列 []→ 只在元件第一次載入時執行一次
• 有指定依賴項 [value] → 只要這些資料 (state 或 props) 改變，就會重新執行

這篇文章大概介紹 useEffect 的概念，下一篇文章會先介紹 JSON Server 模擬後端資料，下下篇文章再回來介紹 useEffect 搭配的實作