# kill-use-callback

> React withStable HOC

Latest version **0.1.0** (published 2022-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install kill-use-callback
pnpm add kill-use-callback
yarn add kill-use-callback
bun add kill-use-callback
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-06-03 |
| First published | 2022-06-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Howard Yang |
| Maintainers | oney |
| Keywords | react, react-hook, useCallback, kill-use-callback |

## Links

- npm: https://www.npmjs.com/package/kill-use-callback
- Repository: https://github.com/oney/kill-use-callback
- Issues: https://github.com/oney/kill-use-callback/issues
- npm.io page: https://npm.io/package/kill-use-callback

## 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.0 (latest) — 2022-06-03

## README

# kill-use-callback

[![npm](https://img.shields.io/npm/v/kill-use-callback?style=flat-square)](https://www.npmjs.com/package/kill-use-callback)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/kill-use-callback?style=flat-square)](https://bundlephobia.com/result?p=kill-use-callback)
[![npm type definitions](https://img.shields.io/npm/types/typescript?style=flat-square)](https://github.com/oney/kill-use-callback/blob/master/src/index.tsx)
[![GitHub](https://img.shields.io/github/license/oney/kill-use-callback?style=flat-square)](https://github.com/oney/kill-use-callback/blob/master/LICENSE)

This package provides memorized callbacks (like `useCallback`) for any callbacks like it's inline or in a condition or loop.

Please ⭐ star this repo if it's useful!

```jsx
import React from "react";
import { propsAreEqual, depFn, useEffect } from "./kill-use-callback";

const Child = React.memo(
  ({getText}) => <div>{getText()}</div>,
  propsAreEqual);

export default function App({items}) {
  const [text, setText] = React.useState("a");
  const [text2, setText2] = React.useState("b");

  const getText = depFn((prefix) => `${prefix}: ${text}`, [text]);
  useEffect(() => {
    console.log(getText("Effect"));
  }, [getText]);

  return (
    <div>
      {items.map(item => (
        <Child getText={depFn(() => `${item}: ${text}`, [text])} />
      ))}
    </div>
  );
}
```

When `text2` changes, `Child` won't re-render and the effect won't re-trigger.  
And `text` changes, `Child` will re-render and the effect will re-trigger.  

## Demo
Please check [this codesandbox example](https://codesandbox.io/s/kill-usecallback-k82teg?file=/src/App.tsx:0-1870).

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