# use-cleared-memo

> useClearedMemo(getFn, clearFn, deps, clearFnDeps)

Latest version **1.4.3** (published 2022-06-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-cleared-memo
pnpm add use-cleared-memo
yarn add use-cleared-memo
bun add use-cleared-memo
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.3 |
| Published | 2022-06-04 |
| First published | 2020-05-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ludvig Aldén |
| Maintainers | ludvigalden |
| Keywords | react, react-native, use-cleared-memo, memoize, clear, effect, hook, react-hooks |

## Links

- npm: https://www.npmjs.com/package/use-cleared-memo
- Repository: https://github.com/ludvigalden/use-cleared-memo
- Homepage: https://github.com/ludvigalden/tree/main/packages/use-cleared-memo#readme
- Issues: https://github.com/ludvigalden/use-cleared-memo/issues
- npm.io page: https://npm.io/package/use-cleared-memo

## 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.4.3 (latest) — 2022-06-04
- 1.4.1 — 2022-05-25
- 1.4.0 — 2022-05-25
- 1.3.0 — 2022-05-24
- 1.2.0 — 2020-11-08
- 1.1.0 — 2020-10-05
- 1.0.0 — 2020-10-04
- 0.1.0 — 2020-05-03

## README

[![Stable Release](https://img.shields.io/npm/v/use-cleared-memo.svg)](https://npm.im/use-cleared-memo)
[![Types Included](https://badgen.net/npm/types/use-cleared-memo)](https://npm.im/use-cleared-memo)
[![GZip Size](https://badgen.net/bundlephobia/minzip/use-cleared-mempo)](https://npm.im/use-cleared-memo)
[![Treeshaking](https://badgen.net/bundlephobia/tree-shaking/use-cleared-memo)](https://npm.im/use-cleared-memo)
[![Blazing Fast](https://badgen.now.sh/badge/speed/blazing%20%F0%9F%94%A5/green)](https://npm.im/use-cleared-memo)
[![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)

---

Are you building a hook or functional React component that needs to predictably clear and/or hydrate memoized values in an easy-to-use way? Opportunities are almost endless; no matter if you're subscribing to external state, initializing timers or intervals, or creating a new instance of some object every time deps change that eventually needs to be deconstructed, `useClearedMemo` will be there for you to do the job.

<a name="useClearedMemo"></a>

## useClearedMemo(getFn, clearFn, deps, clearFnDeps) ⇒ <code>T</code>
<p>Allows for clearing a memoized value when dependencies change as well as on unmount. The code
below is a simplified version of the functionality, which omits the critical fact that the
every value that has been retrieved will be cleared before the next one is retrieved <strong>or</strong> when the component unmounts*.
That means every retrieved value will be cleared, and only once. The most obvious use-case for this is creating subscriptions,
which either just needs to get unsubscribed on unmount or hydrated when a new subscription should be created (based on the deps).</p>
<pre class="prettyprint source lang-typescript"><code> React.useMemo(() => {
   clearFn(value);
   return getFn();
 }, deps);
+ React.useEffect(() => clearFn, deps);
≈ useClearedMemo(getFn, clearFn, deps);
</code></pre>

**Kind**: global function  
**Returns**: <code>T</code> - <p>The value to be memoized and cleared appropriately.</p>  

| Param | Type | Description |
| --- | --- | --- |
| getFn | <code>function</code> | <p>Returns the memoized value that is to be cleared.</p> |
| clearFn | <code>function</code> | <p>Clears the previously memoized value when the component unmounts or the deps change.</p> |
| deps | <code>ReadonlyArray</code> | <p>Identities that the <code>getFn</code> depends on. When changed, the previously memoized value will be cleared and the <code>getFn</code> will be called to retrieve the new value.</p> |
| clearFnDeps | <code>ReadonlyArray</code> | <p>Identities that the <code>clearFn</code> depends on.</p> |


## Authors

- Ludvig Aldén [@ludvigalden](https://github.com/ludvigalden)

---

[MIT License.](https://github.com/ludvigalden/use-cleared-memo/blob/main/LICENSE)

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