Fixed bug with useAsyncEffect user cancellation;

Author: DigitalBrainJS

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.3.0] - 2021-01-07
+
+### Fixed
+- Bug with `useAsyncEffect` user cancellation;
+
 ## [0.2.0] - 2021-01-06
 
 ### Added 

lib/use-async-effect.js

@@ -9,15 +9,26 @@ const isGeneratorFn = (thing) => typeof thing === 'function' &&
     thing.constructor &&
     thing.constructor.name === 'GeneratorFunction';
 
+const isEvent = (thing) => !!(thing && typeof thing === 'object' && thing.type);
+
 const useAsyncEffect = (generator, deps) => {
-    let promise;
+    let ref = useRef(null);
+
+    const cancel = (reason) => {
+        const promise = ref.current;
+        if (promise) {
+            ref.current = null;
+            return promise.cancel(isEvent(reason) ? undefined : reason)
+        }
+        return false;
+    }
 
     useEffect(() => {
         if (!isGeneratorFn(generator)) {
             throw TypeError('useAsyncEffect requires a generator as the first argument');
         }
 
-        promise = CPromise.resolveGenerator(generator, {resolveSignatures: true});
+        let promise = ref.current = CPromise.resolveGenerator(generator, {resolveSignatures: true});
 
         let cb;
 
@@ -33,45 +44,12 @@ const useAsyncEffect = (generator, deps) => {
         });
 
         return () => {
-            promise.cancel(E_REASON_UNMOUNTED);
-            promise = null;
+            cancel(E_REASON_UNMOUNTED);
             cb && cb();
         }
     }, deps);
 
-    return (reason) => !!promise && promise.cancel(reason);
-}
-
-function asyncBottleneck(fn, concurrency = 1) {
-    const queue = [];
-    let pending = 0;
-    return (...args) => new CPromise(resolve => pending === concurrency ? queue.push(resolve) : resolve())
-        .then(() => {
-            pending++;
-            return fn(...args).finally((value) => {
-                pending--;
-                queue.length && queue.shift()();
-                return value;
-            })
-        });
-}
-
-function asyncBottleneck2(fn, concurrency = 1) {
-    const queue = [];
-    let pending = 0;
-    return async (...args) => {
-        if (pending === concurrency) {
-            await new Promise((resolve) => queue.push(resolve));
-        }
-
-        pending++;
-
-        return fn(...args).then((value) => {
-            pending--;
-            queue.length && queue.shift()();
-            return value;
-        });
-    };
+    return cancel;
 }
 
 const useAsyncCallback = (generator, options) => {
@@ -103,7 +81,7 @@ const useAsyncCallback = (generator, options) => {
         const resolveGenerator = () => CPromise.resolveGenerator(generator, {args, resolveSignatures: true});
 
         if (concurrency) {
-            const promise= new CPromise(resolve => {
+            const promise = new CPromise(resolve => {
                 if (current.pending === concurrency) {
                     return queue.push(resolve);
                 }
@@ -125,14 +103,15 @@ const useAsyncCallback = (generator, options) => {
             cancel();
         }
 
-        const promise= resolveGenerator().finally(()=>{
+        const promise = resolveGenerator().finally(() => {
             const index = promises.indexOf(promise);
             index !== -1 && promises.splice(index, 1);
         });
 
         promises.push(promise);
 
-        return combine? promise.finally(()=>{}) : promise;
+        return combine ? promise.finally(() => {
+        }) : promise;
     });
 
     const cancel = (reason) => {

playground/src/TestComponent1.js

@@ -7,12 +7,12 @@ import cpFetch from "cp-fetch";
 export default function TestComponent1(props) {
     const [text, setText] = useState("");
 
-    const cancel= useAsyncEffect(function* ({onCancel}) {
+    const cancel = useAsyncEffect(function* ({onCancel}) {
         console.log("mount");
 
-        this.timeout(5000);
+        this.timeout(10000);
 
-        onCancel(()=> console.log('scope canceled'));
+        onCancel(() => console.log('scope canceled'));
 
         try {
             setText("fetching...");
@@ -31,6 +31,10 @@ export default function TestComponent1(props) {
 
     //setTimeout(()=> cancel("Ooops!"), 1000);
 
-    return <div className="component"><div className="caption">useAsyncEffect demo:</div><div>{text}</div></div>;
+    return <div className="component">
+        <div className="caption">useAsyncEffect demo:</div>
+        <div>{text}</div>
+        <button onClick={cancel}>Abort</button>
+    </div>;
 }