---
title: "useEvent 用法與示例"
description: "這是 [React RFC useEvent](https://github.com/reactjs/rfcs/pull/220) 的基礎實現。它讓你定義的事件處理器可以讀取最新的 props/state，但總是保持穩定的函數引用。"
canonical: https://reactuse.com/zh-Hant/effect/useevent/
---

# useEvent

這是 [React RFC useEvent](https://github.com/reactjs/rfcs/pull/220) 的基礎實現。它讓你定義的事件處理器可以讀取最新的 props/state，但總是保持穩定的函數引用。

`useEvent` 建立一個穩定的事件處理器，其參考在渲染之間保持不變，但始終使用最新的 props 和 state 呼叫。這解決了常見的閉包過時問題，讓你無需在依賴陣列中包含回呼即可獲得最新值。

### 使用場景

- 建立傳遞給子元件的穩定回呼，避免不必要的重新渲染
- 在 `useEffect` 依賴中使用回呼而不觸發無限迴圈
- 從事件處理器中存取最新的 state 而不將其加入依賴陣列

### 注意事項

- **穩定參考**：回傳的函式參考在元件的整個生命週期中保持穩定，可安全地傳遞給使用參考相等性的 `memo` 化子元件。
- **不可在渲染期間呼叫**：此函式僅供事件處理器和 effect 使用，不應在渲染階段呼叫。
- **相關 hooks**：另請參閱 `useLatest` 用於保持對最新值的可變參考。

## Usage

```tsx live

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

  const callbackFn = useCallback(() => {
    alert(`當前計數是 ${count}`);
  }, [count]);

  const memoizedFn = useEvent(() => {
    alert(`當前計數是 ${count}`);
  });

  return (
    <>
      <p>計數：{count}</p>
      <button
        type="button"
        onClick={() => {
          setCount(c => c + 1);
        }}
      >
        增加計數
      </button>
      <div style={{ marginTop: 16 }}>
        <button type="button" onClick={callbackFn}>
          調用 callbackFn
        </button>
        <button type="button" onClick={memoizedFn} style={{ marginLeft: 8 }}>
          調用 memoizedFn
        </button>
      </div>
    </>
  );
};

```

%%API%%