# use-constant-handler

> react hooks useConstant ans useHandler

Latest version **0.1.9** (published 2021-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-constant-handler
pnpm add use-constant-handler
yarn add use-constant-handler
bun add use-constant-handler
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2021-11-10 |
| First published | 2021-08-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | simprl |
| Maintainers | simprl |
| Keywords | react, hook, useConstant, useConstFunction, useConstFunc, useConstHandler, use constant function, use constant handler |

## Links

- npm: https://www.npmjs.com/package/use-constant-handler
- Repository: https://github.com/simprl/use-constant-handler
- Homepage: https://github.com/simprl/use-constant-handler#readme
- Issues: https://github.com/simprl/use-constant-handler/issues
- npm.io page: https://npm.io/package/use-constant-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

- 0.1.9 (latest) — 2021-11-10
- 0.1.8 — 2021-09-15
- 0.1.7 — 2021-09-15
- 0.1.6 — 2021-09-06
- 0.1.5 — 2021-09-06
- 0.1.4 — 2021-09-06
- 0.0.3 — 2021-08-30
- 0.0.2 — 2021-08-30
- 0.0.1 — 2021-08-30

## README

# use-constant-handler
React hooks for make constant pointer to function/handler

[![](https://img.shields.io/npm/l/use-constant-handler.svg?style=flat)](https://github.com/simprl/use-constant-handler/blob/main/LICENSE)
[![](https://img.shields.io/npm/v/use-constant-handler.svg?style=flat)](https://www.npmjs.com/package/use-constant-handler)

# Usage

```jsx
import { useConstHandler } from "use-constant-handler";

const Component = ({ onEvent, onInit }) => {
    // pointer to onInit callback can changed, but pointor to initHandler don't change
    const onInitHandler = useConstFunc(() => onInit());
    useEffect(() => {
        onInitHandler();
    }, [onInitHandler]); //it will call only once becouse initHandler don`t change


    // We do not need redraw input when onEvent callback change.
    // New onEvent callback need only when SubComponent call onEvent.
    // Pointer to onChange callback can changed,
    // but pointor to onChangeHandler don't change
    const onEventHandler = useConstHandler((e) => onEvent(e))
    return <SubComponent onEvent={onEventHandler}/>;
}
```

# Description

### Source code of useConstFunc:
```js
const useConstFunc = (f) => {
	const { current } = useRef((...args) => current[FUNC_KEY]?.(...args));
	current[FUNC_KEY] = f;
	return current;
};
```

### Source code of useConstHandler:
```js
const useConstHandler = (f) => {
    const { current } = useRef((...args) => (current[FUNC_KEY] ?? f)(...args));

    useLayoutEffect(() => {
        current[FUNC_KEY] = f;
    });

    return current;
};
```

---
_Source: https://npm.io/package/use-constant-handler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._