JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2533623
  • Score
    100M100P100Q201988F
  • License MIT

useMemo and useCallback, but without cache invalidation

Package Exports

  • use-memo-one

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-memo-one) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

useMemoOne

useMemo and useCallback with semantic guarantee (stable references)

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 so long as there is no input change.

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])

  // ...
}

API

See useMemo and useCallback