use-memo-one - GitLite

KO | EN

gitlite — search

#javascript #python #react #ai #typescript #llm #golang #rust #java #kubernetes #pytorch #security #mcp #open-source

use-memo-one

(★ 473)

useMemo and useCallback but with a stable cache

File Explorer

Download Latest Version (.zip)

- - validate.yml
- - babel-core_vx.x.x.js
  - babel-eslint_vx.x.x.js
  - babel-jest_vx.x.x.js
  - cross-env_vx.x.x.js
  - enzyme_v3.x.x.js
  - eslint-config-prettier_vx.x.x.js
  - eslint-plugin-flowtype_vx.x.x.js
  - eslint-plugin-jest_vx.x.x.js
  - eslint-plugin-prettier_vx.x.x.js
  - eslint_vx.x.x.js
  - flow-bin_v0.x.x.js
  - jest_v24.x.x.js
  - prettier_v1.x.x.js
  - rimraf_v2.x.x.js
  - rollup-plugin-babel_vx.x.x.js
  - rollup-plugin-commonjs_vx.x.x.js
  - rollup-plugin-replace_vx.x.x.js
  - rollup-plugin-uglify_vx.x.x.js
  - rollup_vx.x.x.js
- are-inputs-equal.js
- index.js
- env-setup.js
- no-input.spec.js
- use-callback-one.spec.js
- use-memo-one.spec.js
.browserslistrc
.eslintignore
.eslintrc.js
.flowconfig
.gitignore
.nvmrc
.prettierignore
.prettierrc
babel.config.js
index.d.ts
jest.config.js
LICENSE
package.json
README.md
rollup.config.js
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/alexreardon/use-memo-one

Downloads the entire project code from GitHub to your computer.

cd use-memo-one

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install use-memo-one --save

Downloads and installs the libraries listed in package.json.

yarn add use-memo-one

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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`',
          },
        ],
      },
    ],
  },
};
```