Gathering detailed insights and metrics for use-memo-one
Gathering detailed insights and metrics for use-memo-one
Gathering detailed insights and metrics for use-memo-one
Gathering detailed insights and metrics for use-memo-one
useMemo and useCallback but with a stable cache
npm install use-memo-one
Typescript
Module System
Node Version
NPM Version
JavaScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Total Downloads
333,258,132
Last Day
404,811
Last Week
1,747,887
Last Month
7,861,454
Last Year
101,047,630
466 Stars
62 Commits
12 Forks
7 Watching
15 Branches
7 Contributors
Minified
Minified + Gzipped
Latest Version
1.1.3
Package Id
use-memo-one@1.1.3
Unpacked Size
15.41 kB
Size
5.11 kB
File Count
11
NPM Version
8.12.1
Node Version
18.4.0
Cumulative downloads
Total Downloads
Last day
-8.8%
404,811
Compared to previous day
Last week
-17.7%
1,747,887
Compared to previous week
Last month
4.2%
7,861,454
Compared to previous month
Last year
16.6%
101,047,630
Compared to previous year
1
31
useMemo
and useCallback
with a stable cache (semantic guarantee)
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.
1# npm 2npm install use-memo-one --save 3# yarn 4yarn add use-memo-one
1import { useMemoOne, useCallbackOne } from 'use-memo-one'; 2 3function App(props) { 4 const { name, age } = props; 5 const value = useMemoOne(() => ({ hello: name }), [name]); 6 const getAge = useCallbackOne(() => age, [age]); 7 8 // ... 9}
You can use this import
style drop in replacement for useMemo
and useCallback
This style also plays very well with eslint-plugin-react-hooks
.
1import { 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
1import { useMemo, useCallback } from 'react'; 2// ❌ naming clash 3import { useMemo, useCallback } from 'use-memo-one';
See useMemo
and useCallback
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:
1import { useMemo, useCallback } from 'use-memo-one'; 2// Or your can alias it yourself 3import { 4 useMemoOne as useMemo, 5 useCallbackOne as useCallback, 6} from 'use-memo-one'; 7 8function App() { 9 const [isActive] = useState(false); 10 11 const onClick = useCallback(() => { 12 console.log('isActive', isActive); 13 14 // the input array will now be correctly checked by eslint-plugin-react-hooks 15 }, [isActive]); 16}
eslint
rulesHere are some eslint
rules you are welcome to use
1module.exports = { 2 rules: { 3 // ...other rules 4 5 'no-restricted-imports': [ 6 'error', 7 { 8 // If you want to force an application to always use useMemoOne 9 paths: [ 10 { 11 name: 'react', 12 importNames: ['useMemo', 'useCallback'], 13 message: 14 '`useMemo` and `useCallback` are subject to cache busting. Please use `useMemoOne`', 15 }, 16 // If you want to force use of the aliased imports from useMemoOne 17 { 18 name: 'use-memo-one', 19 importNames: ['useMemoOne', 'useCallbackOne'], 20 message: 21 'use-memo-one exports `useMemo` and `useCallback` which work nicer with `eslint-plugin-react-hooks`', 22 }, 23 ], 24 }, 25 ], 26 }, 27};
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
Reason
Found 5/18 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
55 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-02-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More