extra-react-hooks 0.6.1 → 0.6.3

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.6.3](https://github.com/BlackGlory/extra-react-hooks/compare/v0.6.2...v0.6.3) (2023-06-13)
+
+
+### Features
+
+* add `useMemoWithCleanup`, `useGetSet` ([9ed180b](https://github.com/BlackGlory/extra-react-hooks/commit/9ed180be34e193371ea6c2beb3adcf2e6ce6356c))
+
+### [0.6.2](https://github.com/BlackGlory/extra-react-hooks/compare/v0.6.1...v0.6.2) (2023-06-13)
+
+
+### Bug Fixes
+
+* **useCallbackAsync:** replace useEffect with useLayoutEffect ([8f8f5f5](https://github.com/BlackGlory/extra-react-hooks/commit/8f8f5f511444bd30132e9eadb781a1a72ccbacb3))
+
 ### [0.6.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.6.0...v0.6.1) (2023-06-13)
 
 

package/README.md

@@ -150,3 +150,19 @@ function useRenderCounter(): number
 ```ts
 function useIIFE(iife: () => void, deps: React.DependencyList): void
 ```
+
+### useMemoWithCleanup
+```ts
+function useMemoWithCleanup<T>(
+  factory: () => T
+, cleanup: (value: T) => void
+, deps?: React.DependencyList
+): T
+```
+
+### useGetSet
+```ts
+function useGetSet<T>(
+  initialValue: T
+): [get: () => T, set: (value: T) => void]
+```

package/lib/index.d.ts

@@ -17,3 +17,5 @@ export * from './use-step.js';
 export * from './use-force-update.js';
 export * from './use-finite-state-machine.js';
 export * from './use-iife.js';
+export * from './use-memo-with-cleanup.js';
+export * from './use-get-set.js';

package/lib/index.js

@@ -17,4 +17,6 @@ export * from './use-step.js';
 export * from './use-force-update.js';
 export * from './use-finite-state-machine.js';
 export * from './use-iife.js';
+export * from './use-memo-with-cleanup.js';
+export * from './use-get-set.js';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA"}

package/lib/use-callback-async.js

@@ -1,20 +1,20 @@
-import { useEffect, useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { go } from '@blackglory/prelude';
 import { AbortController } from 'extra-abort';
-const abort = Symbol();
+import { useMemoWithCleanup } from './use-memo-with-cleanup.js';
+const symbolAbort = Symbol();
 export function useCallbackAsync(callback, deps) {
-    const controller = useMemo(() => new AbortController(), deps);
-    useEffect(() => () => controller.abort(abort), [controller]);
+    const controller = useMemoWithCleanup(() => new AbortController(), controller => controller.abort(symbolAbort), deps);
     return useCallback((...args) => {
         go(async () => {
             try {
                 await callback(...args, controller.signal);
             }
             catch (err) {
-                if (err !== abort)
+                if (err !== symbolAbort)
                     throw err;
             }
         });
-    }, [controller]);
+    }, deps);
 }
 //# sourceMappingURL=use-callback-async.js.map

package/lib/use-callback-async.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-callback-async.js","sourceRoot":"","sources":["../src/use-callback-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,KAAK,GAAG,MAAM,EAAE,CAAA;AAEtB,MAAM,UAAU,gBAAgB,CAC9B,QAA0E,EAC1E,IAAoB;IAEpB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAAE,IAAI,CAAC,CAAA;IAC7D,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAE5D,OAAO,WAAW,CAAC,CAAC,GAAG,IAAU,EAAE,EAAE;QACnC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI;gBACF,MAAM,QAAQ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;aAC3C;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,GAAG,KAAK,KAAK;oBAAE,MAAM,GAAG,CAAA;aAC7B;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;AAClB,CAAC"}
+{"version":3,"file":"use-callback-async.js","sourceRoot":"","sources":["../src/use-callback-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAkB,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAE/D,MAAM,WAAW,GAAG,MAAM,EAAE,CAAA;AAE5B,MAAM,UAAU,gBAAgB,CAC9B,QAA0E,EAC1E,IAAoB;IAEpB,MAAM,UAAU,GAAG,kBAAkB,CACnC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAC3B,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,EAC3C,IAAI,CACL,CAAA;IAED,OAAO,WAAW,CAAC,CAAC,GAAG,IAAU,EAAE,EAAE;QACnC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI;gBACF,MAAM,QAAQ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;aAC3C;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,GAAG,KAAK,WAAW;oBAAE,MAAM,GAAG,CAAA;aACnC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}

package/lib/use-get-set.d.ts

@@ -0,0 +1 @@
+export declare function useGetSet<T>(initialValue: T): [get: () => T, set: (value: T) => void];

package/lib/use-get-set.js

@@ -0,0 +1,16 @@
+import { useRef, useCallback } from 'react';
+import { useForceUpdate } from './use-force-update.js';
+export function useGetSet(initialValue) {
+    const forceUpdate = useForceUpdate();
+    const ref = useRef(initialValue);
+    return [
+        useCallback(() => ref.current, []),
+        useCallback((value) => {
+            if (ref.current !== value) {
+                ref.current = value;
+                forceUpdate();
+            }
+        }, [])
+    ];
+}
+//# sourceMappingURL=use-get-set.js.map

package/lib/use-get-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-get-set.js","sourceRoot":"","sources":["../src/use-get-set.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEtD,MAAM,UAAU,SAAS,CACvB,YAAe;IAEf,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IACpC,MAAM,GAAG,GAAG,MAAM,CAAI,YAAY,CAAC,CAAA;IAEnC,OAAO;QACL,WAAW,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC;QAClC,WAAW,CAAC,CAAC,KAAQ,EAAE,EAAE;YACvB,IAAI,GAAG,CAAC,OAAO,KAAK,KAAK,EAAE;gBACzB,GAAG,CAAC,OAAO,GAAG,KAAK,CAAA;gBACnB,WAAW,EAAE,CAAA;aACd;QACH,CAAC,EAAE,EAAE,CAAC;KACP,CAAA;AACH,CAAC"}

package/lib/use-memo-with-cleanup.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useMemoWithCleanup<T>(factory: () => T, cleanup: (value: T) => void, deps?: React.DependencyList): T;

package/lib/use-memo-with-cleanup.js

@@ -0,0 +1,9 @@
+import { useMemo, useEffect } from 'react';
+export function useMemoWithCleanup(factory, cleanup, deps) {
+    const value = useMemo(factory, deps);
+    useEffect(() => {
+        return () => cleanup(value);
+    }, deps);
+    return value;
+}
+//# sourceMappingURL=use-memo-with-cleanup.js.map

package/lib/use-memo-with-cleanup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-memo-with-cleanup.js","sourceRoot":"","sources":["../src/use-memo-with-cleanup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE1C,MAAM,UAAU,kBAAkB,CAChC,OAAgB,EAChB,OAA2B,EAC3B,IAA2B;IAE3B,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC,EAAE,IAAI,CAAC,CAAA;IAER,OAAO,KAAK,CAAA;AACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-hooks",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "",
   "keywords": [],
   "files": [

package/src/index.ts

@@ -17,3 +17,5 @@ export * from './use-step.js'
 export * from './use-force-update.js'
 export * from './use-finite-state-machine.js'
 export * from './use-iife.js'
+export * from './use-memo-with-cleanup.js'
+export * from './use-get-set.js'

package/src/use-callback-async.ts

@@ -1,23 +1,27 @@
-import { useEffect, useCallback, useMemo, DependencyList } from 'react'
+import { useCallback, DependencyList } from 'react'
 import { go } from '@blackglory/prelude'
 import { AbortController } from 'extra-abort'
+import { useMemoWithCleanup } from './use-memo-with-cleanup.js'
 
-const abort = Symbol()
+const symbolAbort = Symbol()
 
 export function useCallbackAsync<Args extends unknown[]>(
   callback: (...args: [...args: Args, signal: AbortSignal]) => Promise<void>
 , deps: DependencyList
 ): (...args: Args) => void {
-  const controller = useMemo(() => new AbortController(), deps)
-  useEffect(() => () => controller.abort(abort), [controller])
+  const controller = useMemoWithCleanup(
+    () => new AbortController()
+  , controller => controller.abort(symbolAbort)
+  , deps
+  )
 
   return useCallback((...args: Args) => {
     go(async () => {
       try {
         await callback(...args, controller.signal)
       } catch (err) {
-        if (err !== abort) throw err
+        if (err !== symbolAbort) throw err
       }
     })
-  }, [controller])
+  }, deps)
 }

package/src/use-get-set.ts

@@ -0,0 +1,19 @@
+import { useRef, useCallback } from 'react'
+import { useForceUpdate } from './use-force-update.js'
+
+export function useGetSet<T>(
+  initialValue: T
+): [get: () => T, set: (value: T) => void] {
+  const forceUpdate = useForceUpdate()
+  const ref = useRef<T>(initialValue)
+
+  return [
+    useCallback(() => ref.current, [])
+  , useCallback((value: T) => {
+      if (ref.current !== value) {
+        ref.current = value
+        forceUpdate()
+      }
+    }, [])
+  ]
+}

package/src/use-memo-with-cleanup.ts

@@ -0,0 +1,15 @@
+import { useMemo, useEffect } from 'react'
+
+export function useMemoWithCleanup<T>(
+  factory: () => T
+, cleanup: (value: T) => void
+, deps?: React.DependencyList
+): T {
+  const value = useMemo(factory, deps)
+
+  useEffect(() => {
+    return () => cleanup(value)
+  }, deps)
+
+  return value
+}