Skip to content
useMemo and useCallback but with a stable cache
JavaScript
Branch: master
Clone or download
Latest commit bebea6a Jul 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
flow-typed/npm initial Apr 1, 2019
src adding aliased exports (#5) Apr 16, 2019
test adding tests for no inputs Apr 2, 2019
.browserslistrc initial Apr 1, 2019
.eslintignore initial Apr 1, 2019
.eslintrc.js initial Apr 1, 2019
.flowconfig initial Apr 1, 2019
.gitignore initial Apr 1, 2019
.nvmrc updating node version Jul 9, 2019
.prettierignore initial Apr 1, 2019
.prettierrc initial Apr 1, 2019
.travis.yml updating node version Jul 9, 2019
LICENSE initial Apr 1, 2019
README.md bumping dev deps (#7) Jul 9, 2019
babel.config.js initial Apr 1, 2019
index.d.ts Adding typescript typings Apr 4, 2019
jest.config.js initial Apr 1, 2019
package.json v1.1.1 Jul 9, 2019
rollup.config.js removing flow from rollup.config.js Apr 1, 2019
yarn.lock bumping dev deps (#7) Jul 9, 2019

README.md

useMemoOne

useMemo and useCallback with a stable cache (semantic guarantee)

Build Status npm dependencies min minzip

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

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

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

Usage

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.

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

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

API

See useMemo and useCallback

Linting

useMemo and useCallback have fantastic linting rules with auto fixing in the eslint-plugin-react-hooks package. In order to take advantage of these with useMemoOne and useCallbackOne, structure your import like this:

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 rules

Here are some eslint rules you are welcome to use

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`',
          },
        ],
      },
    ],
  },
};
You can’t perform that action at this time.