# use-memo-one

> useMemo and useCallback but with a stable cache

Latest version **1.1.3** (published 2022-08-31) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2022-08-31 |
| First published | 2019-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 473 |
| Author | Alex Reardon |
| Maintainers | alexreardon |
| Keywords | memoization, react, useMemo, useCallback, memoize-one |

## Links

- npm: https://www.npmjs.com/package/use-memo-one
- Repository: https://github.com/alexreardon/use-memo-one
- Homepage: https://github.com/alexreardon/use-memo-one#readme
- Issues: https://github.com/alexreardon/use-memo-one/issues
- npm.io page: https://npm.io/package/use-memo-one

## 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.1.3 (latest) — 2022-08-31
- 1.1.0-beta.0 (beta) — 2019-04-16
- 1.1.2 — 2021-01-25
- 1.1.1 — 2019-07-09
- 1.1.0 — 2019-04-17
- 1.0.1 — 2019-04-08
- 1.0.0 — 2019-04-02
- 0.0.8 — 2019-04-02
- 0.0.7 — 2019-04-02
- 0.0.6 — 2019-04-02
- 0.0.5 — 2019-04-02
- 0.0.4 — 2019-04-02
- 0.0.3 — 2019-04-01
- 0.0.2 — 2019-04-01
- 0.0.1 — 2019-04-01

## README

# useMemoOne

[`useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo) and [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback) with a stable cache (semantic guarantee)

[![Build Status](https://github.com/alexreardon/use-memo-one/actions?query=workflow%3AValidate)](https://github.com/alexreardon/use-memo-one/workflows/Validate/badge.svg)
[![npm](https://img.shields.io/npm/v/use-memo-one.svg)](https://www.npmjs.com/package/use-memo-one)
[![dependencies](https://david-dm.org/alexreardon/use-memo-one.svg)](https://david-dm.org/alexreardon/use-memo-one)
[![min](https://img.shields.io/bundlephobia/min/use-memo-one.svg)](https://bundlephobia.com/result?p=use-memo-one)
[![minzip](https://img.shields.io/bundlephobia/minzip/use-memo-one.svg)](https://bundlephobia.com/result?p=use-memo-one)

## Background

`useMemo` and `useCallback` cache the most recent result. However, this cache can be destroyed by `React` when it wants to:

> You may rely on useMemo as a performance optimization, **not as a semantic guarantee**. In the future, **React may choose to “forget” some previously memoized values** and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance. [- React docs](https://reactjs.org/docs/hooks-reference.html#usememo)

`useMemoOne` and `useCallbackOne` are `concurrent mode` safe alternatives to `useMemo` and `useCallback` **that do provide semantic guarantee**. What this means is that you will always get the same reference for a memoized value so long as there is no input change.

Using `useMemoOne` and `useCallbackOne` will consume more memory than `useMemo` and `useCallback` in order to provide a stable cache. `React` can release the cache of `useMemo` and `useCallback`, but `useMemoOne` will not release the cache until it is garbage collected.

## Install

```bash
# npm
npm install use-memo-one --save
# yarn
yarn add use-memo-one
```

## Usage

```js
import { useMemoOne, useCallbackOne } from 'use-memo-one';

function App(props) {
  const { name, age } = props;
  const value = useMemoOne(() => ({ hello: name }), [name]);
  const getAge = useCallbackOne(() => age, [age]);

  // ...
}
```

### Aliased imports

You can use this `import` style drop in replacement for `useMemo` and `useCallback`

This style also plays very well with [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks).

```js
import { useMemo, useCallback } from 'use-memo-one';
```

⚠️ The aliased exports `useMemo` and `useCallback` will only work if you use _only_ `use-memo-one` and will clash if you also use `useMemo` or `useCallback` from `react`

```js
import { useMemo, useCallback } from 'react';
// ❌ naming clash
import { useMemo, useCallback } from 'use-memo-one';
```

## API

See [`useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo) and [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback)

## Linting

`useMemo` and `useCallback` have fantastic linting rules with auto fixing in the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) package. In order to take advantage of these with `useMemoOne` and `useCallbackOne`, structure your import like this:

```js
import { useMemo, useCallback } from 'use-memo-one';
// Or your can alias it yourself
import {
  useMemoOne as useMemo,
  useCallbackOne as useCallback,
} from 'use-memo-one';

function App() {
  const [isActive] = useState(false);

  const onClick = useCallback(() => {
    console.log('isActive', isActive);

    // the input array will now be correctly checked by eslint-plugin-react-hooks
  }, [isActive]);
}
```

## [`eslint`](https://eslint.org/) rules

Here are some `eslint` rules you are welcome to use

```js
module.exports = {
  rules: {
    // ...other rules

    'no-restricted-imports': [
      'error',
      {
        // If you want to force an application to always use useMemoOne
        paths: [
          {
            name: 'react',
            importNames: ['useMemo', 'useCallback'],
            message:
              '`useMemo` and `useCallback` are subject to cache busting. Please use `useMemoOne`',
          },
          // If you want to force use of the aliased imports from useMemoOne
          {
            name: 'use-memo-one',
            importNames: ['useMemoOne', 'useCallbackOne'],
            message:
              'use-memo-one exports `useMemo` and `useCallback` which work nicer with `eslint-plugin-react-hooks`',
          },
        ],
      },
    ],
  },
};
```

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