https://github.com/the-road-to-learn-react/use-state-with-callback
Custom hook to include a callback function for useState.
https://github.com/the-road-to-learn-react/use-state-with-callback
callback react react-hook react-hooks react-use-state-callback reactjs
Last synced: 8 months ago
JSON representation
Custom hook to include a callback function for useState.
- Host: GitHub
- URL: https://github.com/the-road-to-learn-react/use-state-with-callback
- Owner: the-road-to-learn-react
- License: mit
- Created: 2019-05-31T10:02:22.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-04-14T21:07:50.000Z (over 3 years ago)
- Last Synced: 2025-04-13T02:17:22.920Z (8 months ago)
- Topics: callback, react, react-hook, react-hooks, react-use-state-callback, reactjs
- Language: JavaScript
- Homepage: https://www.robinwieruch.de
- Size: 1.64 MB
- Stars: 276
- Watchers: 6
- Forks: 36
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# useStateWithCallback React Hook
[](https://travis-ci.org/the-road-to-learn-react/use-state-with-callback) [](https://greenkeeper.io/) 
Custom hook to include a callback function for useState which was previously available for setState in class components. [Read more about it here.](https://www.robinwieruch.de/react-usestate-callback/)
## Installation
`npm install use-state-with-callback`
## Usage
**useStateWithCallback:**
```jsx
import * as React from 'react';
import useStateWithCallback from 'use-state-with-callback';
// Note: cannot be used on the server-side (e.g. Next.js)
// import { useStateWithCallbackInstant } from 'use-state-with-callback';
const App = () => {
const [count, setCount] = useStateWithCallback(0, currentCount => {
console.log('render, then callback.');
console.log('otherwise use useStateWithCallbackInstant()');
if (currentCount > 1) {
console.log('Threshold of over 1 reached.');
} else {
console.log('No threshold reached.');
}
});
// const [count, setCount] = useStateWithCallbackInstant(0, currentCount => {
// console.log('render with instant callback.');
// if (currentCount > 1) {
// console.log('Threshold of over 1 reached.');
// } else {
// console.log('No threshold reached.');
// }
// });
const handleClick = () => {
setCount(count + 1);
};
return (
{count}
Increase
);
};
export default App;
```
**useStateWithCallbackLazy:**
```jsx
import * as React from 'react';
import { useStateWithCallbackLazy } from 'use-state-with-callback';
const App = () => {
const [count, setCount] = useStateWithCallbackLazy(0);
const handleClick = () => {
setCount(count + 1, (currentCount) => {
if (currentCount > 1) {
console.log('Threshold of over 1 reached.');
} else {
console.log('No threshold reached.');
}
});
};
return (
{count}
Increase
);
};
export default App;
```
## Pitfalls
* When a state update is called with the current value and optimized away, the callback is never called.
* `useStateWithCallbackLazy` calls the callback with the scope that existed before update, while this.setState callback can access the updated this.state and `get something()` computed values. This can't be fixed, but it's a problem for people who expect a drop-in replacement.
* When `useStateWithCallbackLazy` state is updated several times with batching (e.g. in an event handler), only the last update calls the callback.
## Contribute
- `git clone git@github.com:the-road-to-learn-react/use-state-with-callback.git`
- `cd use-state-with-callback`
- `npm install`
- `npm run test`
### More
- [Publishing a Node Package to NPM](https://www.robinwieruch.de/publish-npm-package-node/)
- [Node.js Testing Setup](https://www.robinwieruch.de/node-js-testing-mocha-chai/)
- [React Testing Setup](https://www.robinwieruch.de/react-testing-tutorial/)