use-memo-map 0.0.0-main.ec78c8b → 0.0.1-main.0b8a8ca
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -25
- package/lib/commonjs/private/usePrevious.js +2 -2
- package/lib/commonjs/private/usePrevious.js.map +1 -1
- package/lib/commonjs/private/useValueRef.js +1 -1
- package/lib/commonjs/private/useValueRef.js.map +1 -1
- package/lib/esmodules/private/usePrevious.js +2 -2
- package/lib/esmodules/private/usePrevious.js.map +1 -1
- package/lib/esmodules/private/useValueRef.js +1 -1
- package/lib/esmodules/private/useValueRef.js.map +1 -1
- package/lib/types/private/usePrevious.d.ts +1 -1
- package/lib/types/private/useValueRef.d.ts +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -4,30 +4,9 @@ Memoizes calls to array map function similar to `React.useMemo`. Memoized result
|
|
|
4
4
|
|
|
5
5
|
## Background
|
|
6
6
|
|
|
7
|
-
tl;dr, `React.useMemo()` cache a single call. `
|
|
7
|
+
tl;dr, `React.useMemo()` cache a single call. `useMemoMap()` cache multiple calls.
|
|
8
8
|
|
|
9
|
-
If you have a variable-length array and would like to cache `Array.map` like `useMemo`, you can use `
|
|
10
|
-
|
|
11
|
-
## API
|
|
12
|
-
|
|
13
|
-
```ts
|
|
14
|
-
type UseMemoMapOptions<T> = {
|
|
15
|
-
itemEquality?: (this: readonly T[], x: T, y: T) => boolean;
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
function useMemoMap<T = unknown, R = unknown>(
|
|
19
|
-
mapper: (this: readonly T[], item: T, index: -1, array: readonly T[]) => R,
|
|
20
|
-
{ itemEquality = Object.is }: UseMemoMapOptions<T> = {}
|
|
21
|
-
): (array: readonly T[]) => readonly R[] {}
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
For example, converting a `number` array into a `string` array.
|
|
25
|
-
|
|
26
|
-
```ts
|
|
27
|
-
function useMemoMap(
|
|
28
|
-
mapper: (item: number, index: -1, array: readonly number[]) => string
|
|
29
|
-
): (array: readonly number[]) => readonly string[];
|
|
30
|
-
```
|
|
9
|
+
If you have a variable-length array and would like to cache `Array.map` like `useMemo`, you can use `useMemoMap` to cache all calls.
|
|
31
10
|
|
|
32
11
|
## How to use
|
|
33
12
|
|
|
@@ -41,7 +20,7 @@ const MyComponent = () => {
|
|
|
41
20
|
return value * 10;
|
|
42
21
|
}, []);
|
|
43
22
|
|
|
44
|
-
// useMemoMap() will return a function
|
|
23
|
+
// useMemoMap() will return a function that take an array.
|
|
45
24
|
const map = useMemoMap(multiplyBy10);
|
|
46
25
|
|
|
47
26
|
const output = map([1, 2, 3]); // Returns [10, 20, 30].
|
|
@@ -52,6 +31,27 @@ const MyComponent = () => {
|
|
|
52
31
|
export default MyComponent;
|
|
53
32
|
```
|
|
54
33
|
|
|
34
|
+
## API
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
type UseMemoMapOptions<T> = {
|
|
38
|
+
itemEquality?: (this: readonly T[], x: T, y: T) => boolean;
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
function useMemoMap<T = unknown, R = unknown>(
|
|
42
|
+
mapper: (this: readonly T[], item: T, index: -1, array: readonly T[]) => R,
|
|
43
|
+
{ itemEquality = Object.is }: UseMemoMapOptions<T> = {}
|
|
44
|
+
): (array: readonly T[]) => readonly R[] {}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
For example, converting a `number` array into a `string` array.
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
function useMemoMap(
|
|
51
|
+
mapper: (item: number, index: -1, array: readonly number[]) => string
|
|
52
|
+
): (array: readonly number[]) => readonly string[];
|
|
53
|
+
```
|
|
54
|
+
|
|
55
55
|
## Behaviors
|
|
56
56
|
|
|
57
57
|
### Invalidate all results when mapper function change
|
|
@@ -95,7 +95,7 @@ Note: the "cache pool" will be saved during `useEffect()` callback. This is simi
|
|
|
95
95
|
|
|
96
96
|
### Index is always `-1`
|
|
97
97
|
|
|
98
|
-
Unlike `Array.map()` which pass the `index` value as second argument, `
|
|
98
|
+
Unlike `Array.map()` which pass the `index` value as second argument, `useMemoMap()` will always pass `-1`. This is by design.
|
|
99
99
|
|
|
100
100
|
Calls to mapper function could be cached and will not be called again if only `index` has changed. To protect wrong use of `index` value, we pass `-1` instead.
|
|
101
101
|
|
|
@@ -6,8 +6,8 @@ _Object$defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = usePrevious;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
function usePrevious(value) {
|
|
10
|
-
var ref = (0, _react.useRef)();
|
|
9
|
+
function usePrevious(value, initialValue) {
|
|
10
|
+
var ref = (0, _react.useRef)(initialValue);
|
|
11
11
|
(0, _react.useEffect)(function () {
|
|
12
12
|
ref.current = value;
|
|
13
13
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePrevious.js","names":["usePrevious","value","ref","useRef","useEffect","current"],"sources":["../../../src/private/usePrevious.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport default function usePrevious<T>(value: T): T | undefined {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n}\n"],"mappings":";;;;;;;AAAA;AAEe,SAASA,WAAW,CAAIC,KAAQ,EAAiB;
|
|
1
|
+
{"version":3,"file":"usePrevious.js","names":["usePrevious","value","initialValue","ref","useRef","useEffect","current"],"sources":["../../../src/private/usePrevious.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport default function usePrevious<T>(value: T, initialValue?: T): T | undefined {\n const ref = useRef<T | undefined>(initialValue);\n\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n}\n"],"mappings":";;;;;;;AAAA;AAEe,SAASA,WAAW,CAAIC,KAAQ,EAAEC,YAAgB,EAAiB;EAChF,IAAMC,GAAG,GAAG,IAAAC,aAAM,EAAgBF,YAAY,CAAC;EAE/C,IAAAG,gBAAS,EAAC,YAAM;IACdF,GAAG,CAACG,OAAO,GAAGL,KAAK;EACrB,CAAC,CAAC;EAEF,OAAOE,GAAG,CAACG,OAAO;AACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useValueRef.js","names":["useValueRef","value","ref","useRef","readOnlyRef","useMemo","current","get"],"sources":["../../../src/private/useValueRef.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useValueRef.js","names":["useValueRef","value","ref","useRef","readOnlyRef","useMemo","current","get"],"sources":["../../../src/private/useValueRef.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nexport default function useValueRef<T>(value: T): RefObject<T> & { current: T } {\n const ref = useRef<T>();\n\n const readOnlyRef = useMemo(() => Object.create({}, { current: { get: () => ref.current } }), [ref]);\n\n ref.current = value;\n\n return readOnlyRef;\n}\n"],"mappings":";;;;;;;;;AAAA;AAGe,SAASA,WAAW,CAAIC,KAAQ,EAAiC;EAC9E,IAAMC,GAAG,GAAG,IAAAC,aAAM,GAAK;EAEvB,IAAMC,WAAW,GAAG,IAAAC,cAAO,EAAC;IAAA,OAAM,qBAAc,CAAC,CAAC,EAAE;MAAEC,OAAO,EAAE;QAAEC,GAAG,EAAE;UAAA,OAAML,GAAG,CAACI,OAAO;QAAA;MAAC;IAAE,CAAC,CAAC;EAAA,GAAE,CAACJ,GAAG,CAAC,CAAC;EAEpGA,GAAG,CAACI,OAAO,GAAGL,KAAK;EAEnB,OAAOG,WAAW;AACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePrevious.js","names":["useEffect","useRef","usePrevious","value","ref","current"],"sources":["../../../src/private/usePrevious.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport default function usePrevious<T>(value: T): T | undefined {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEzC,eAAe,SAASC,WAAW,CAAIC,KAAQ,EAAiB;
|
|
1
|
+
{"version":3,"file":"usePrevious.js","names":["useEffect","useRef","usePrevious","value","initialValue","ref","current"],"sources":["../../../src/private/usePrevious.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport default function usePrevious<T>(value: T, initialValue?: T): T | undefined {\n const ref = useRef<T | undefined>(initialValue);\n\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEzC,eAAe,SAASC,WAAW,CAAIC,KAAQ,EAAEC,YAAgB,EAAiB;EAChF,IAAMC,GAAG,GAAGJ,MAAM,CAAgBG,YAAY,CAAC;EAE/CJ,SAAS,CAAC,YAAM;IACdK,GAAG,CAACC,OAAO,GAAGH,KAAK;EACrB,CAAC,CAAC;EAEF,OAAOE,GAAG,CAACC,OAAO;AACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useValueRef.js","names":["useMemo","useRef","useValueRef","value","ref","readOnlyRef","current","get"],"sources":["../../../src/private/useValueRef.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useValueRef.js","names":["useMemo","useRef","useValueRef","value","ref","readOnlyRef","current","get"],"sources":["../../../src/private/useValueRef.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nexport default function useValueRef<T>(value: T): RefObject<T> & { current: T } {\n const ref = useRef<T>();\n\n const readOnlyRef = useMemo(() => Object.create({}, { current: { get: () => ref.current } }), [ref]);\n\n ref.current = value;\n\n return readOnlyRef;\n}\n"],"mappings":";AAAA,SAASA,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAGvC,eAAe,SAASC,WAAW,CAAIC,KAAQ,EAAiC;EAC9E,IAAMC,GAAG,GAAGH,MAAM,EAAK;EAEvB,IAAMI,WAAW,GAAGL,OAAO,CAAC;IAAA,OAAM,eAAc,CAAC,CAAC,EAAE;MAAEM,OAAO,EAAE;QAAEC,GAAG,EAAE;UAAA,OAAMH,GAAG,CAACE,OAAO;QAAA;MAAC;IAAE,CAAC,CAAC;EAAA,GAAE,CAACF,GAAG,CAAC,CAAC;EAEpGA,GAAG,CAACE,OAAO,GAAGH,KAAK;EAEnB,OAAOE,WAAW;AACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default function usePrevious<T>(value: T): T | undefined;
|
|
1
|
+
export default function usePrevious<T>(value: T, initialValue?: T): T | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "use-memo-map",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.1-main.0b8a8ca",
|
|
4
4
|
"description": "",
|
|
5
5
|
"files": [
|
|
6
6
|
"./lib/*"
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"build:babel:commonjs": "babel src --config-file ./babel.commonjs.config.json --extensions .ts,.tsx --out-dir ./lib/commonjs/",
|
|
24
24
|
"build:babel:esmodules": "babel src --config-file ./babel.esmodules.config.json --extensions .ts,.tsx --out-dir ./lib/esmodules/",
|
|
25
25
|
"build:typescript": "tsc --project ./src/tsconfig.declaration.json",
|
|
26
|
+
"precommit": "eslint ./src/",
|
|
26
27
|
"test": "jest"
|
|
27
28
|
},
|
|
28
29
|
"repository": {
|