use-memo-one - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0-beta.0

dist/use-memo-one.cjs.js

		@@ -44,4 +44,8 @@ 'use strict';
		}
		var useMemo = useMemoOne;
		var useCallback = useCallbackOne;

		exports.useCallback = useCallback;
		exports.useCallbackOne = useCallbackOne;
		exports.useMemo = useMemo;
		exports.useMemoOne = useMemoOne;

dist/use-memo-one.esm.js

		@@ -40,3 +40,5 @@ import { useState, useRef, useEffect } from 'react';
		}
		var useMemo = useMemoOne;
		var useCallback = useCallbackOne;

		export { useCallbackOne, useMemoOne };
		export { useCallback, useCallbackOne, useMemo, useMemoOne };

dist/use-memo-one.js

		@@ -44,4 +44,8 @@ (function (global, factory) {
		}
		var useMemo = useMemoOne;
		var useCallback = useCallbackOne;

		exports.useCallback = useCallback;
		exports.useCallbackOne = useCallbackOne;
		exports.useMemo = useMemo;
		exports.useMemoOne = useMemoOne;
		@@ -48,0 +52,0 @@

dist/use-memo-one.min.js

		@@ -1,1 +0,1 @@
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e\|\|self).useMemoOne={},e.React)}(this,function(e,f){"use strict";function n(e,t){var n=f.useState(function(){return{inputs:t,result:e()}})[0],u=f.useRef(n),r=Boolean(t&&u.current.inputs&&function(e,t){if(e.length!==t.length)return!1;for(var n=0;n<e.length;n++)if(e[n]!==t[n])return!1;return!0}(t,u.current.inputs))?u.current:{inputs:t,result:e()};return f.useEffect(function(){u.current=r},[r]),r.result}e.useCallbackOne=function(e,t){return n(function(){return e},t)},e.useMemoOne=n,Object.defineProperty(e,"__esModule",{value:!0})});
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e\|\|self).useMemoOne={},e.React)}(this,function(e,o){"use strict";function n(e,t){var n=o.useState(function(){return{inputs:t,result:e()}})[0],u=o.useRef(n),r=Boolean(t&&u.current.inputs&&function(e,t){if(e.length!==t.length)return!1;for(var n=0;n<e.length;n++)if(e[n]!==t[n])return!1;return!0}(t,u.current.inputs))?u.current:{inputs:t,result:e()};return o.useEffect(function(){u.current=r},[r]),r.result}function t(e,t){return n(function(){return e},t)}var u=n,r=t;e.useCallback=r,e.useCallbackOne=t,e.useMemo=u,e.useMemoOne=n,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

		{
		"name": "use-memo-one",
		"version": "1.0.1",
		"version": "1.1.0-beta.0",
		"description": "useMemo and useCallback but with a stable cache",
		@@ -5,0 +5,0 @@ "keywords": [

README.md

		@@ -19,3 +19,3 @@ # useMemoOne

		Using `useMemoOne` and `useCallbackOne` will consume more memory than `useMemo` and `useCallback` in order to provide a stable cache.
		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.

		@@ -45,4 +45,75 @@ ## Install

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

src/index.js

		@@ -56,1 +56,8 @@ // @flow
		}

		// Aliased exports
		// A drop in replacement for useMemo and useCallback that plays
		// very well with eslint-plugin-react-hooks

		export const useMemo = useMemoOne;
		export const useCallback = useCallbackOne;

use-memo-one - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics