在 React 中，我們常常需要管理狀態。最常見的 Hook 是 useState，但有時候會聽到「這裡用 useReducer 會比較好」。那麼，這兩個差在哪裡？什麼時候該用哪一個？

概念解釋

• useState
  最簡單的狀態管理工具，適合處理 單一值 或 邏輯單純的狀態。
  更新方式直接：setState(newValue)。

• useReducer
  更結構化的狀態管理。
  適合處理 複雜邏輯 或 多種更新方式。
  透過 dispatch(action) 呼叫 reducer 函數，最後回傳新的 state。

可以想像：useState 是「直接存值」，useReducer 則是「透過工廠生產值」。

範例程式碼

useState：簡單計數器

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

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

useReducer：多邏輯計數器

function Counter() {
  const initialState = { count: 0 };

  function reducer(state, action) {
    switch (action.type) {
      case "increment":
        return { count: state.count + 1 };
      case "decrement":
        return { count: state.count - 1 };
      case "reset":
        return { count: 0 };
      default:
        return state;
    }
  }

  const [state, dispatch] = React.useReducer(reducer, initialState);

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+1</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-1</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

更複雜的例子

表單管理

function SignupForm() {
  const initialState = { name: "", email: "", password: "" };

  function reducer(state, action) {
    switch (action.type) {
      case "updateField":
        return { ...state, [action.field]: action.value };
      case "reset":
        return initialState;
      default:
        return state;
    }
  }

  const [state, dispatch] = React.useReducer(reducer, initialState);

  return (
    <form>
      <input
        value={state.name}
        onChange={(e) =>
          dispatch({ type: "updateField", field: "name", value: e.target.value })
        }
      />
      <input
        value={state.email}
        onChange={(e) =>
          dispatch({ type: "updateField", field: "email", value: e.target.value })
        }
      />
      <input
        type="password"
        value={state.password}
        onChange={(e) =>
          dispatch({ type: "updateField", field: "password", value: e.target.value })
        }
      />
      <button type="button" onClick={() => dispatch({ type: "reset" })}>
        Reset
      </button>
    </form>
  );
}

用 useState 處理三個輸入框會需要三個 setter；但 useReducer 可以把邏輯集中在 reducer 中，結構更清晰。

常見誤解

1. 「所有狀態都要用 useReducer」
   → 小狀態用 useState 更直觀。
2. 「用 useState 更新物件就好」
   → 當欄位多、邏輯複雜時，用 useReducer 更乾淨。

面試回答模板

中文

我會用 useState 處理簡單狀態，比如計數器或 modal 開關。
當狀態複雜、有多種更新方式，或需要集中管理邏輯時，我會改用 useReducer。
簡單來說，useState 適合單純，useReducer 適合結構化。

英文

I use useState when the state is simple, like toggling a modal or tracking a counter.
I switch to useReducer when the state is more complex, with multiple update actions, or when I want to centralize the logic.
Basically, useState is for simple cases, while useReducer is for structured state management.

總結

• useState → 適合簡單狀態，更新方式直觀。
• useReducer → 適合複雜狀態，把邏輯集中到 reducer。