use-latest-callback

React hook which returns the latest callback without changing the reference

MIT 23 个版本
react use-event use-callback
主页
仓库
提交 Issue
安装
npm install use-latest-callback
yarn add use-latest-callback
pnpm add use-latest-callback
bun add use-latest-callback
README

use-latest-callback

React hook which returns the latest callback without changing the reference.

This is useful for scenarios such as event listeners where you may not want to resubscribe when the callback changes.

Installation

Open a Terminal in the project root and run:

npm install use-latest-callback

Usage

The useLatestCallback hook accepts a function as its argument and returns a function that preserves its reference across renders.

import useLatestCallback from 'use-latest-callback';

// ...

function MyComponent() {
  const callback = useLatestCallback((value) => {
    console.log('Changed', value);
  });

  React.useEffect(() => {
    someEvent.addListener(callback);

    return () => someEvent.removeListener(callback);
  }, [callback]);

  return <>{/* whatever */}</>;
}

It's important to note that the callback is not intended to be called during the render phase. Only call the callback in response to an event.

版本列表
0.3.4 2026-05-13
0.3.3 2025-11-28
0.3.2 2025-10-29
0.3.1 2025-10-11
0.3.0 2025-10-11
0.2.6 2025-10-11
0.2.5 2025-10-06
0.2.4 2025-06-14
0.2.3 2024-11-14
0.2.2 2024-11-14
0.2.1 2024-07-10
0.2.0 2024-07-10
0.1.11 2024-07-07
0.1.10 2024-07-07
0.1.9 2023-11-09
0.1.8 2023-11-09
0.1.7 2023-10-19
0.1.6 2023-04-14
0.1.5 2022-08-24
0.1.4 2022-06-02
0.1.3 2022-06-02
0.1.2 2022-06-02
0.1.1 2021-06-14