https://github.com/guoyunhe/use-latest-callback
React hook to provide stable reference to latest callback function
https://github.com/guoyunhe/use-latest-callback
Last synced: about 2 months ago
JSON representation
React hook to provide stable reference to latest callback function
- Host: GitHub
- URL: https://github.com/guoyunhe/use-latest-callback
- Owner: guoyunhe
- License: mit
- Created: 2025-01-13T05:42:28.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-13T06:43:05.000Z (5 months ago)
- Last Synced: 2025-03-29T03:51:18.417Z (2 months ago)
- Language: TypeScript
- Size: 7.81 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @guoyunhe/use-latest-callback
React hook to provide stable reference to latest callback function
## Installation
```bash
npm install --save @guoyunhe/use-latest-callback
```
## Examples
```js
import { useEffect, useRef, useState } from 'react';
import { useLatestCallback } from '@guoyunhe/use-latest-callback';
function List({ search }) {
const [data, setData] = useState();
const reload = useLatestCallback(() => {
fetch('foobar?search=' + search)
.then((res) => res.json())
.then((res) => setData(res));
});
// When search change, useEffect will NOT run because dependencies didn't change
useEffect(() => {
const interval = setInterval(() => reload(), 3000);
return () => {
clearInterval(interval);
};
}, [reload]);
}
```
Compared with traditional useCallback:
```js
import { useCallback, useEffect, useRef, useState } from 'react';
function List({ search }) {
const [data, setData] = useState();
const reload = useCallback(() => {
fetch('foobar?search=' + search)
.then((res) => res.json())
.then((res) => setData(res));
}, [search]);
// When search change, useEffect will run because dependencies changed
useEffect(() => {
const interval = setInterval(() => reload(), 3000);
return () => {
clearInterval(interval);
};
}, [reload]);
}
```