# react-use-handler
> turn recreatable function to a persistent one
Latest version **1.2.0** (published 2020-01-18) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-use-handler
pnpm add react-use-handler
yarn add react-use-handler
bun add react-use-handler
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.2.0 |
| Published | 2020-01-18 |
| First published | 2019-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Vadzim Zieńka |
| Maintainers | vadzim |
| Keywords | react, hooks, useHandler, useCallback |
## Links
- npm: https://www.npmjs.com/package/react-use-handler
- Repository: https://github.com/vadzim/react-use-handler
- Homepage: https://github.com/vadzim/react-use-handler#readme
- Issues: https://github.com/vadzim/react-use-handler/issues
- npm.io page: https://npm.io/package/react-use-handler
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.2.0 (latest) — 2020-01-18
- 1.1.1 — 2019-05-11
- 1.1.0 — 2019-05-02
- 1.0.12 — 2019-04-30
- 1.0.11 — 2019-04-30
- 1.0.9 — 2019-04-30
## README
# useHandler
[](https://npmjs.org/package/react-use-handler)
[](https://travis-ci.org/vadzim/react-use-handler)
[](https://codecov.io/gh/vadzim/react-use-handler/branch/master)
## TL;DR
In most cases [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback "Hook API Reference") hook should work for you. But if it doesn't, you're in the right place :)
## What is it about?
This is an analogue of bound methods in class components, but for hooks.
Here is an example of a class component:
```javascript
class ClassComponent extends React.Component {
myHandler = (data) => {
doSmth(data, this.props.prop1)
}
render() {
return
}
}
```
or in a more brutal way
```javascript
class ClassComponent extends React.Component {
constructor() {
this.myHandler = this.myHandler.bind(this)
}
myHandler(data) {
doSmth(data, this.props.prop1)
}
render() {
return
}
}
```
`myHandler` method has access to actual `props` and `state` while `ChildComponent` receives the same instance of `myHandler` in its prop on every render.
This feature can be usefull in some cases.
### Use case #1.
Suppose you are using ChildComponent and want to get notifications from it on some events:
```javascript
{ /* .... */ })} />
```
Actually `ChildComponent` receives newly created instance of a function in `onCoolEvent` prop on each render.
Sometimes it is not a problem, sometimes it is. Sometimes [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback "Hook API Reference") will help you. In case it's a problem and [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback "Hook API Reference") is not enough just wrap that function with `useHandler` like this
```javascript
{ /* .... */ })} />
```
`useHandler` guarantees that its return value will never change, but it'll always call the actual instance of your function with correct bindings.
### Use case #2.
Suppose you are developing a component with some expensive async effects. Like so:
```javascript
const EffectiveComponent = ({ prop1, prop2, onFirstStage, onSecondStage }) => {
/*...*/
useEffect(() => {
let mounted = true
void async function () {
// very expensive calculations1....
if (!mounted) return
onFirstStage()
// even more expensive calculations2....
if (!mounted) return
onSecondStage()
}()
return () => { mounted = false }
}, [prop1, prop2])
}
```
Let's imagine you appreciate your effect very much and do not want to restart it if some of event props change. You want your effect to just do its work and emit some events. But there is a problem. If `on...` prop change you should restart your effect otherwise eventually it will call obsolete things. If you restart your effect on minor prop changes you can end up with some bad user experience.
To escape this you could make a ref, store there your event handler and then call it inside your effect without any trouble. But that's exactly what `useHandler` does! Let's use it:
```javascript
const EffectiveComponent = ({ prop1, prop2, onFirstStage, onSecondStage }) => {
/*...*/
const onFirstEvent = useHandler(onFirstStage)
const onSecondEvent = useHandler(onSecondStage)
useEffect(() => {
let mounted = true
void async function () {
// very expensive calculations #1....
if (!mounted) return
onFirstEvent()
// even more expensive calculations #2....
if (!mounted) return
onSecondEvent()
}()
return () => { mounted = false }
}, [prop1, prop2])
return /*....*/
}
```
`useHandler` also handles the case when callback is actually undefined or null. In those cases it calls nothing and returns undefined.
## API
#### Table of Contents
- [useHandler](#usehandler)
- [Parameters](#parameters)
### useHandler
This hook makes a proxy for a function.
It guarantees to return the same instance across multiple renders. It calls nothing if the actual handler is nullish.
#### Parameters
- `f` **Func?** Some being recreated function to wrap.
Returns **Func** function.
## License
MIT © [Vadzim Zieńka](https://github.com/vadzim)
---
_Source: https://npm.io/package/react-use-handler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._