建立 2026-09-15 更新 2026-09-15

State

State 是元件「自己記得」的資料。使用者點按鈕、打字、切分頁時，你更新 state，React 重新執行元件函式，依新資料畫出畫面。

為什麼普通變數不夠

function Counter() {
  let count = 0;
  return (
    <button type="button" onClick={() => count++}>
      {count}
    </button>
  );
}

count++ 改了變數，但 React 不知道要重畫，畫面會停在 0。要讓 React 參與，用 useState。

useState

import { useState } from "react";

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

  return (
    <button type="button" onClick={() => setCount(count + 1)}>
      點了 {count} 次
    </button>
  );
}

• useState(0) 的參數是初始值，只在第一次渲染使用。
• 回傳陣列：目前值、以及更新它的函式。慣例寫成 [count, setCount]。
• 呼叫 setCount 後，React 會再跑一次元件，count 才是新數字。

更新若依賴「上一刻的值」，用函式形式，避免連續點擊時讀到過期的 count：

setCount((prev) => prev + 1);

物件與陣列要當成不可變

State 裡的物件、陣列不要直接改欄位，要產出新的再 set：

setUser({ ...user, name: "Ada" });
setItems([...items, newItem]);
setItems(items.filter((item) => item.id !== id));

直接 user.name = "Ada" 再 setUser(user)，參考沒變，React 可能認為沒更新而不重畫。

規則

• 只在元件函式頂層呼叫 Hook，不要放進迴圈、條件或巢狀函式。
• 每個元件實例有自己的 state；兩個 <Counter /> 互不干擾。
• 想共用同一份數字，把 state 放到父元件，見 提升 State。

官方對照：State: A Component's Memory。畫面示範可看 YouTube 優質教學。