react note

useEffect

useEffect 是 React 裡面的一個 hook，用來處理「副作用」（side effects）。

簡單說：

在 React 裡，純粹的 render（畫面渲染）最好只負責把 UI 畫出來；但實際開發時，常常會有「非渲染」的邏輯需要做，例如：

• 資料請求（像是 fetch API）
• 設定訂閱（例如 WebSocket、事件監聽）
• 操作 DOM
• 設定計時器（setTimeout / setInterval）
• 清理資源（例如 component 卸載時清除監聽）

這些行為就叫做「副作用」，不屬於 render 的純粹計算，這時候就會用 useEffect 來管理。

基本語法：

import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    // 這裡放要執行的副作用
    console.log("Component 已經 render 完畢");

    // 可以回傳一個清理函式 (optional)
    return () => {
      console.log("Component 要卸載或更新了，做清理");
    };
  }, []); // 依賴陣列
}

useEffect

裡的第二個參數：依賴陣列

• []：只在 component 第一次 render 完成時執行一次（相當於 componentDidMount）
• [依賴]：只在指定的依賴變數改變時執行
• 不寫第二個參數：每次 render 都執行

範例：

import { useState, useEffect } from "react";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("count 改變了：", count);
  }, [count]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

小總結：

用途	寫法
初始執行一次	useEffect(() => { ... }, [])
監聽特定變數變動	useEffect(() => { ... }, [變數])
每次 render 都執行	useEffect(() => { ... })