『Day 26』理解 React useEffect

前言

在開發 React 專案的過程中，我常常遇到需要處理 API 請求、訂閱外部資料、或是直接操作 DOM 的情況。一開始總是搞不清楚這些邏輯應該放在哪裡，直到認識了 useEffect 這個強大的 Hook，才發現原來 React 早就為我們準備好處理這些「副作用」的解決方案。今天就讓我分享一下使用 useEffect 的心得。

useEffect：React 的同步機制

在 React 的世界裡，元件的邏輯主要可以分成三種：

渲染邏輯 - 單純的運算和畫面呈現
事件處理 - 回應使用者的特定操作
副作用(Effect) - 需要與外部系統互動的邏輯

其中特別要注意的是，Effect 和事件處理是不一樣的：

事件處理是因為特定的使用者互動而觸發（例如按下按鈕）
Effect 則是因為渲染本身需要進行的同步工作

使用 Effect 前的重要提醒

在急著加入 Effect 之前，我建議先問問自己：這個需求真的需要 Effect 嗎？

很多時候，如果只是要根據其他 state 來調整 state，其實不需要用到 Effect。Effect 主要是用來與「外部系統」同步，像是瀏覽器 API 或第三方套件等。

Effect 的重要特性

執行時機

// 每次渲染都執行
useEffect(() => {
  // 程式碼
});

// 只在掛載和卸載時執行
useEffect(() => {
  // 程式碼
  return () => {
    // 清理程式碼
  }
}, []);

// 相依值改變時執行
useEffect(() => {
  // 程式碼
}, [count, name]);

Cleanup Function 的重要性

useEffect(() => {
  // 建立連線
  const connection = createConnection();
  connection.connect();

  // 清理函式
  return () => {
    connection.disconnect();
  };
}, [serverUrl]);

Cleanup Function 很重要，它能幫助我們：

避免記憶體洩漏
確保資源正確釋放
防止過時的資料更新

開發環境的特殊行為

React 在開發環境中會特意重複執行 Effect 兩次，這是為了幫助我們及早發現問題。雖然有些人會試圖阻止這個行為，但我建議不要這麼做。這個機制其實是在幫助我們測試元件是否能正確處理重複掛載/卸載的情況。

總結

useEffect 是 React 提供給我們處理副作用的強大工具，但要記得：

不是所有狀態更新都需要用 Effect
正確實作 cleanup function 很重要
不要阻止開發環境的重複執行機制

只要掌握好這些原則，相信大家都能寫出更穩健的 React 應用程式。