extra-react-hooks 0.6.1 → 0.6.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.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/lib/use-callback-async.js

@@ -1,10 +1,12 @@
-import { useEffect, useCallback, useMemo } from 'react';
+import { useLayoutEffect, useCallback, useMemo } from 'react';
 import { go } from '@blackglory/prelude';
 import { AbortController } from 'extra-abort';
 const abort = Symbol();
 export function useCallbackAsync(callback, deps) {
     const controller = useMemo(() => new AbortController(), deps);
-    useEffect(() => () => controller.abort(abort), [controller]);
+    useLayoutEffect(() => {
+        return () => controller.abort(abort);
+    }, [controller]);
     return useCallback((...args) => {
         go(async () => {
             try {

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,eAAe,EAAE,WAAW,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAA;AAC7E,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,eAAe,CAAC,GAAG,EAAE;QACnB,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IACtC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,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"}

package/package.json

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

package/src/use-callback-async.ts

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useMemo, DependencyList } from 'react'
+import { useLayoutEffect, useCallback, useMemo, DependencyList } from 'react'
 import { go } from '@blackglory/prelude'
 import { AbortController } from 'extra-abort'
 
@@ -9,7 +9,9 @@ export function useCallbackAsync<Args extends unknown[]>(
 , deps: DependencyList
 ): (...args: Args) => void {
   const controller = useMemo(() => new AbortController(), deps)
-  useEffect(() => () => controller.abort(abort), [controller])
+  useLayoutEffect(() => {
+    return () => controller.abort(abort)
+  }, [controller])
 
   return useCallback((...args: Args) => {
     go(async () => {