{"_id":"@aleclarson/use-memo-one","_rev":"1-d42bff2a6e0e3e1afb106616e3aa3cdc","name":"@aleclarson/use-memo-one","dist-tags":{"latest":"1.1.1"},"versions":{"1.1.1":{"name":"@aleclarson/use-memo-one","version":"1.1.1","description":"useMemo and useCallback but with a stable cache","keywords":["memoization","react","useMemo","useCallback","memoize-one"],"main":"dist/use-memo-one.cjs.js","module":"dist/use-memo-one.esm.js","sideEffects":false,"author":{"name":"Alex Reardon","email":"alexreardon@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alexreardon/use-memo-one.git"},"peerDependencies":{"react":"^16.8.0"},"devDependencies":{"@babel/core":"^7.5.0","@babel/preset-env":"^7.5.2","@babel/preset-flow":"^7.0.0","@babel/preset-react":"^7.0.0","babel-core":"^6.26.3","babel-eslint":"^10.0.2","babel-jest":"^24.8.0","enzyme":"^3.10.0","enzyme-adapter-react-16":"^1.14.0","eslint":"^6.0.1","eslint-config-airbnb":"^17.1.1","eslint-config-prettier":"^6.0.0","eslint-plugin-flowtype":"^3.11.1","eslint-plugin-import":"^2.18.0","eslint-plugin-jest":"^22.7.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.0","eslint-plugin-react":"^7.14.2","eslint-plugin-react-hooks":"^1.6.1","flow-bin":"^0.102.0","jest":"^24.8.0","jest-watch-typeahead":"^0.3.1","prettier":"^1.18.2","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^2.6.3","rollup":"^1.16.7","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.0.1","rollup-plugin-replace":"^2.2.0","rollup-plugin-uglify":"^6.0.2"},"config":{"prettier_target":"*.{js,jsx,md,json} src/**/*.{js,jsx,md,json} test/**/*.{js,jsx,md,json}"},"scripts":{"validate":"yarn run lint && yarn run typecheck","test":"jest","typecheck":"flow check","prettier:check":"yarn prettier --debug-check $npm_package_config_prettier_target","prettier:write":"yarn prettier --write $npm_package_config_prettier_target","lint:eslint":"eslint src test","lint":"yarn lint:eslint && yarn prettier:check","build":"yarn run build:clean && yarn run build:dist && yarn run build:flow","build:clean":"rimraf dist","build:dist":"rollup -c","build:flow":"echo \"// @flow\n\nexport * from '../src';\" > dist/use-memo-one.cjs.js.flow","prepublish":"yarn run build"},"gitHead":"b3d0e2bd3055fb0af008158100cf2f24858912f5","bugs":{"url":"https://github.com/alexreardon/use-memo-one/issues"},"homepage":"https://github.com/alexreardon/use-memo-one#readme","_id":"@aleclarson/use-memo-one@1.1.1","_nodeVersion":"14.15.3","_npmVersion":"6.14.9","dist":{"integrity":"sha512-m0UVaQE6wDY0Y6No5jAT5Z75E++GprI85w/9++jw7+qpyXQ46hKMU42wjCQ+5YHgSfrU/wfsDpwH9N+7aX8Hxg==","shasum":"50c82d51306349417c20e1ac2e7df8e15051461e","tarball":"https://registry.npmjs.org/@aleclarson/use-memo-one/-/use-memo-one-1.1.1.tgz","fileCount":11,"unpackedSize":16054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgA108CRA9TVsSAnZWagAAO2AP/RzDtdZ8YmNMTCkVy/ih\nOXOsVGgQyeEFQihUGMpTrwNYJJNvJ+u6VVwEmufA6yFHRR4Zt2PP5Kyfu79j\naGmOkNA/o0I6MvswaLvLyYGQ/IUTd/t97kAhQWqxCraSbWSDqbTqB+cHcHot\ntF38xPL/CmHBuCyIvmDd47Rw9ART5ikHbgl11OLC4zS7Tzds7o6B65aB91/g\nNVoZLNY93t3IHRMIo2HnfceXIr+PNSdCnx0XZA30GvuOTcX33T1PVUmFryIO\nQouAEBQ2Dd12XXzMK3aK01/vlkaFEhz+WN+mqA+3GftdyW73Y4cuvhWziWC9\n+iM8nPZPU3uq0fO/TsdySiFSkKzWmQcTvbkpr4hkIJSqQka1GTuArS2gzMv4\n/M5g/H24SbNoEs0v5sJmQaAoq/PyPwrJb0Mxf8NgqGHxjgGgOVL+mbCnObSf\nxAA4BH+GwaHw9rAWWArIWwtG45/gt8J9Kv3k/wU//+sp2v38eBg7u52+dS81\nhvGYkMg0gS/0lwpUf2Ic3vpyTSaG7FR0+gF4h5TWrOGVUgi0bZnJB8ekP0Ns\nKZFB6fbAtYkTxU2Z9ASeQMrSqezjzPgcza+rca7XFTJ3PdKSPq1RuOr3tBig\nCiVRfjnkwPMAdjRCpB3Ot7im/rGN1M3I42Hot6jn5zwi67gxiFxlUnSDMBSc\nIl5M\r\n=AlVx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVdx3fpNIoLccX6hwExGo+XaTd54OBllyXYIMZNgRgRgIgXDQD0A545RbIfaQik9IatdMjqwKRVJMLj5nOAm4D2TE="}]},"_npmUser":{"name":"aleclarson","email":"aleclarson@protonmail.com"},"directories":{},"maintainers":[{"name":"aleclarson","email":"aleclarson@protonmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-memo-one_1.1.1_1610833211575_0.666045112943155"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-16T21:40:11.540Z","1.1.1":"2021-01-16T21:40:11.683Z","modified":"2022-04-04T12:36:52.266Z"},"maintainers":[{"name":"aleclarson","email":"aleclarson@protonmail.com"}],"description":"useMemo and useCallback but with a stable cache","homepage":"https://github.com/alexreardon/use-memo-one#readme","keywords":["memoization","react","useMemo","useCallback","memoize-one"],"repository":{"type":"git","url":"git+https://github.com/alexreardon/use-memo-one.git"},"author":{"name":"Alex Reardon","email":"alexreardon@gmail.com"},"bugs":{"url":"https://github.com/alexreardon/use-memo-one/issues"},"license":"MIT","readme":"# useMemoOne\n\n[`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)\n\n[![Build Status](https://travis-ci.org/alexreardon/use-memo-one.svg?branch=master)](https://travis-ci.org/alexreardon/use-memo-one)\n[![npm](https://img.shields.io/npm/v/use-memo-one.svg)](https://www.npmjs.com/package/use-memo-one)\n[![dependencies](https://david-dm.org/alexreardon/use-memo-one.svg)](https://david-dm.org/alexreardon/use-memo-one)\n[![min](https://img.shields.io/bundlephobia/min/use-memo-one.svg)](https://bundlephobia.com/result?p=use-memo-one)\n[![minzip](https://img.shields.io/bundlephobia/minzip/use-memo-one.svg)](https://bundlephobia.com/result?p=use-memo-one)\n\n## Background\n\n`useMemo` and `useCallback` cache the most recent result. However, this cache can be destroyed by `React` when it wants to:\n\n> 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)\n\n`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.\n\nUsing `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.\n\n## Install\n\n```bash\n# npm\nnpm install use-memo-one --save\n# yarn\nyarn add use-memo-one\n```\n\n## Usage\n\n```js\nimport { useMemoOne, useCallbackOne } from 'use-memo-one';\n\nfunction App(props) {\n  const { name, age } = props;\n  const value = useMemoOne(() => ({ hello: name }), [name]);\n  const getAge = useCallbackOne(() => age, [age]);\n\n  // ...\n}\n```\n\n### Aliased imports\n\nYou can use this `import` style drop in replacement for `useMemo` and `useCallback`\n\nThis style also plays very well with [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks).\n\n```js\nimport { useMemo, useCallback } from 'use-memo-one';\n```\n\n⚠️ 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`\n\n```js\nimport { useMemo, useCallback } from 'react';\n// ❌ naming clash\nimport { useMemo, useCallback } from 'use-memo-one';\n```\n\n## API\n\nSee [`useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo) and [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback)\n\n## Linting\n\n`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:\n\n```js\nimport { useMemo, useCallback } from 'use-memo-one';\n// Or your can alias it yourself\nimport {\n  useMemoOne as useMemo,\n  useCallbackOne as useCallback,\n} from 'use-memo-one';\n\nfunction App() {\n  const [isActive] = useState(false);\n\n  const onClick = useCallback(() => {\n    console.log('isActive', isActive);\n\n    // the input array will now be correctly checked by eslint-plugin-react-hooks\n  }, [isActive]);\n}\n```\n\n## [`eslint`](https://eslint.org/) rules\n\nHere are some `eslint` rules you are welcome to use\n\n```js\nmodule.exports = {\n  rules: {\n    // ...other rules\n\n    'no-restricted-imports': [\n      'error',\n      {\n        // If you want to force an application to always use useMemoOne\n        paths: [\n          {\n            name: 'react',\n            importNames: ['useMemo', 'useCallback'],\n            message:\n              '`useMemo` and `useCallback` are subject to cache busting. Please use `useMemoOne`',\n          },\n          // If you want to force use of the aliased imports from useMemoOne\n          {\n            name: 'use-memo-one',\n            importNames: ['useMemoOne', 'useCallbackOne'],\n            message:\n              'use-memo-one exports `useMemo` and `useCallback` which work nicer with `eslint-plugin-react-hooks`',\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n","readmeFilename":"README.md"}