Refactored useAsyncEffect hook;

Refactored so that an E_REASON_RESTART error does not lead to the state change.
Optimized internal state change;

Author: DigitalBrainJS

lib/use-async-effect.js

@@ -1,4 +1,4 @@
-const {useEffect, useCallback, useRef, useState} = require("react");
+const {useEffect, useMemo, useRef, useState} = require("react");
 const {CPromise, CanceledError, E_REASON_UNMOUNTED} = require("c-promise2");
 const isEqualObjects = require('is-equal-objects/dist/is-equal-objects.cjs');
 
@@ -166,11 +166,20 @@ const useAsyncCallback = (generator, options) => {
         throw TypeError('options must be an object or array');
     }
 
+    const initialState= {
+        done: false,
+        result: undefined,
+        error: undefined,
+        canceled: false,
+        pending: false
+    };
+
     const {current} = useRef({
         promises: [],
         queue: [],
         pending: 0,
-        args: null
+        args: null,
+        state: initialState
     });
 
     let {
@@ -200,115 +209,123 @@ const useAsyncCallback = (generator, options) => {
         throw Error('queueSize must be a finite number >=-1');
     }
 
-    const [state, setState]= states? useState({
-        done: false,
-        result: undefined,
-        error: undefined,
-        canceled: false,
-        pending: false
-    }) : [];
+    const [state, setState]= states? useState(initialState) : [];
+
+    const setDeepState = (newState) => {
+        if (isEqualObjects(current.state, newState)) return;
+        setState(newState);
+        current.state = newState;
+    }
 
     const singleThreaded= threads === 1;
 
-    const callback = useCallback((...args) => {
-        const {promises, queue} = current;
-        let n;
-
-        if (combine && (n = promises.length)) {
-            let promise;
-            while (n-- > 0) {
-                promise = promises[n];
-                if (argsToPromiseMap.has(promise) && isEqualObjects(argsToPromiseMap.get(promise), args)) {
-                    if (cancelPrevious) {
-                        promise.cancel(E_REASON_RESTART);
-                        break;
+    const callback = useMemo(()=>{
+        const cancel= (reason) => {
+            const _reason = isEvent(reason) ? undefined : reason;
+            current.promises.forEach(promise => promise.cancel(_reason));
+            current.promises.length = 0;
+        };
+
+        const fn= (...args) => {
+            const {promises, queue} = current;
+            let n;
+
+            if (combine && (n = promises.length)) {
+                let promise;
+                while (n-- > 0) {
+                    promise = promises[n];
+                    if (argsToPromiseMap.has(promise) && isEqualObjects(argsToPromiseMap.get(promise), args)) {
+                        if (cancelPrevious) {
+                            promise.cancel(E_REASON_RESTART);
+                            break;
+                        }
+                        return CPromise.resolve(promise);
                     }
-                    return CPromise.resolve(promise);
                 }
             }
-        }
 
-        const resolveGenerator = () => CPromise.run(generator, {args, resolveSignatures: true, scopeArg});
+            const resolveGenerator = () => CPromise.run(generator, {args, resolveSignatures: true, scopeArg});
 
-        cancelPrevious && !combine && cancel(E_REASON_RESTART);
+            cancelPrevious && !combine && cancel(E_REASON_RESTART);
 
-        if (threads || queueSize !== -1) {
-            let started;
+            if (threads || queueSize !== -1) {
+                let started;
 
-            let promise = new CPromise(resolve => {
-                const start= ()=> {
-                    current.pending++;
+                let promise = new CPromise(resolve => {
+                    const start= ()=> {
+                        current.pending++;
 
-                    started= true;
+                        started= true;
 
-                    if (states && singleThreaded) {
-                        setState({
-                            done: false,
-                            pending: true,
-                            canceled: false
-                        })
+                        if (states && singleThreaded) {
+                            setDeepState({
+                                ...initialState,
+                                pending: true,
+                            })
+                        }
+                        resolve();
                     }
-                    resolve();
-                }
 
-                if (current.pending === threads) {
-                    if (queueSize !== -1 && queue.length === queueSize) {
-                        throw CanceledError.from(E_REASON_QUEUE_OVERFLOW);
-                    }
+                    if (current.pending === threads) {
+                        if (queueSize !== -1 && queue.length === queueSize) {
+                            throw CanceledError.from(E_REASON_QUEUE_OVERFLOW);
+                        }
 
-                    return queue.push(start);
-                }
+                        return queue.push(start);
+                    }
 
-                start();
-            }).weight(0)
-                .then(resolveGenerator)
-                [catchErrors? 'done': 'finally']((value, isRejected) => {
+                    start();
+                }).weight(0)
+                  .then(resolveGenerator)
+                  [catchErrors? 'done': 'finally']((value, isRejected) => {
                     started && current.pending--;
                     removeElement(promises, promise);
                     combine && argsToPromiseMap.delete(promise);
                     queue.length && queue.shift()();
-
                     const canceled= !!(isRejected && CanceledError.isCanceledError(value));
 
-                    if(canceled && value.code === E_REASON_UNMOUNTED){
+                    if(canceled && (value.code === E_REASON_UNMOUNTED || value.code === E_REASON_RESTART)){
                         return;
                     }
 
-                    state && singleThreaded && setState({
-                        done: true,
+                    states && singleThreaded && setDeepState({
                         pending: false,
+                        done: true,
                         error: isRejected? value : undefined,
                         result: isRejected? undefined : value,
                         canceled
                     });
                 }).weight(0).aggregate();
 
-            promises.push(promise);
+                promises.push(promise);
 
-            combine && argsToPromiseMap.set(promise, args);
+                combine && argsToPromiseMap.set(promise, args);
 
-            return promise;
-        }
+                return promise;
+            }
 
-        const promise = resolveGenerator()[catchErrors? 'done' : 'finally'](() => {
-            removeElement(promises, promise);
-            combine && argsToPromiseMap.delete(promise);
-        }).weight(0).aggregate();
+            const promise = resolveGenerator()[catchErrors? 'done' : 'finally'](() => {
+                removeElement(promises, promise);
+                combine && argsToPromiseMap.delete(promise);
+            }).weight(0).aggregate();
 
-        promises.push(promise);
+            promises.push(promise);
+
+            if (combine) {
+                argsToPromiseMap.set(promise, args);
+            }
 
-        if (combine) {
-            argsToPromiseMap.set(promise, args);
+            return promise;
         }
 
-        return promise;
-    });
+        fn.cancel= cancel;
 
-    const cancel = (reason) => {
-        const _reason = isEvent(reason) ? undefined : reason;
-        current.promises.forEach(promise => promise.cancel(_reason));
-        current.promises.length = 0;
-    };
+        return fn;
+    }, deps);
+
+    useEffect(() => {
+        return () => callback.cancel(E_REASON_UNMOUNTED);
+    }, deps);
 
     if(states) {
         if(!singleThreaded){
@@ -321,20 +338,14 @@ const useAsyncCallback = (generator, options) => {
         callback.canceled = state.canceled;
 
         callback[Symbol.iterator] = function*() {
-            yield* [callback, cancel, state.pending, state.done, state.result, state.error, state.canceled];
+            yield* [callback, callback.cancel, state.pending, state.done, state.result, state.error, state.canceled];
         }
     } else{
         callback[Symbol.iterator] = function*() {
-            yield* [callback, cancel];
+            yield* [callback, callback.cancel];
         }
     }
 
-    useEffect(() => {
-        return () => cancel(E_REASON_UNMOUNTED);
-    }, deps);
-
-    callback.cancel = cancel;
-
     return callback;
 }