許多開發者都遇到過這樣的困惑：在調用 setState（如 setCount(1)）后緊接著 console.log(count)，輸出的仍是舊值。這種現象并非個例，而是 React 渲染與調度機制的必然結果。

本文將用清晰的流程與貼近日常的比喻，說明 為什么 useState 不會“即時”生效、React 的渲染如何運作，以及該如何正確地響應與使用狀態更新。

useState 是什么？

useState 是給函數組件添加狀態的 Hook，它返回“當前值”和“更新該值的函數”：

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

表面上很簡單，但一旦出現如下寫法，疑問就來了：

setCount(1);
console.log(count); // 為什么還是 0？

useState 是“異步”嗎？

嚴格來講，useState不是像 Promise 那樣的異步 API；但更新不會立刻應用。可以把 setState 理解為向 React 發出的請求：

“請把這個值改成 X，等合適的時機再更新 UI。”

React 會在下一次渲染周期里應用更新，而不是在當前函數調用過程中立刻改寫變量。因此，在 setState 后立刻讀取，看到的仍是更新前的值。

幕后發生了什么？

React 為了性能，會對更新進行批處理（batching）。當調用 setCount(1) 時，大致流程如下：

1. 記錄更新請求（把“把 count 改為 1”加入更新隊列）；
2. 等待當前函數執行完畢（確保一次事件中的多次更新可以合并）；
3. 觸發重新渲染（以新狀態重新執行組件函數，生成新 UI）。

 在觸發新一輪渲染之前，組件函數內部“看見”的仍是舊狀態。

為何 setState 后立刻 console.log 不奏效？

const [name, setName] = useState('John');

const handleClick = () => {
  setName('Jane');
  console.log(name); // 輸出 "John"，而不是 "Jane"
};

原因很簡單：console.log 發生在本次函數執行之內，而狀態變更會在下一次渲染時生效。

正確寫法：函數式更新（functional update）

當新狀態依賴舊狀態時，使用函數式更新可以確保拿到最新的基準值，即便在批處理場景中也安全可靠：

setCount(prev => {
  const next = prev + 1;
  console.log('更新過程中的值：', next);
  return next;
});

這樣 React 會把 prev 設為真正的最新舊值，避免競爭條件。

想在“更新后”做事？用 useEffect

需要在狀態變更并完成重新渲染后執行副作用邏輯，使用 useEffect 訂閱目標狀態：

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

useEffect(() => {
  console.log('count 已更新為：', count);
}, [count]);

當 count 引發組件完成一次新的渲染后，上述副作用才會運行。

生活類比：點咖啡

• 你：“來一杯卡布奇諾。”（setState）
• 咖啡師：“收到！”（React 記錄更新，安排下一輪渲染）
• 你立刻看柜臺：咖啡還沒出現（console.log 仍是舊值）
• 片刻后：咖啡端上來（完成渲染，UI 與狀態同步）

setState 像是下單：并不會立刻得到咖啡，但它已經在路上。

實戰要點與易錯點

• 同一事件中的多次 setState 會被批處理避免在一次點擊中多次依賴“立刻更新”；要么函數式更新，要么把后續邏輯放到 **useEffect**。
• 日志位置要講究想要看到更新后的值，不要在 setState 之后立刻 console.log，而應放在 useEffect 中。
• 新值依賴舊值一律用函數式更新：setX(prev => compute(prev))。
• 副作用不要寫在渲染邏輯里組件函數應保持純粹；副作用（例如請求、訂閱、DOM 操作）放進 **useEffect**。
• 理解渲染是“重跑函數”每次渲染都會重新執行組件函數，useState 返回的值是當次渲染的快照，而非可隨時改變的變量。

小結

• useState 的更新不會在當前函數內立刻生效；
• React 會批處理更新并在下一次渲染中應用；
• 需要基于舊值更新，使用函數式更新；
• 想在更新完成后做事，用 useEffect 訂閱；
• 把 setState 當作“下單”，新 UI 會在下一輪渲染“端上來”。

掌握這些機制，就能寫出更可預測、少坑位的 React 代碼。下次再遇到“為什么狀態沒更新”的困惑時，不妨回想：更新已下單，正在路上。