Fixed bug with affected initial state object of the useAsyncDeepState hook;

Author: DigitalBrainJS

lib/use-async-effect.js

@@ -348,12 +348,10 @@ const useAsyncCallback = (generator, options) => {
 
                 if(states && singleThreaded){
                     promise.onPause(()=> setState({
-                        ...current.state,
                         paused: true
                     }))
 
                     promise.onResume(()=> setState({
-                        ...current.state,
                         paused: false
                     }))
                 }
@@ -448,7 +446,7 @@ const useAsyncDeepState = (initialValue, {watch= true}= {}) => {
             throw TypeError('initial state must be a plain object');
         }
 
-        const state= initialValue || {};
+        const state= initialValue? Object.assign({}, initialValue) : {};
 
         Object.assign(current, {
             state,

playground/src/TestComponent9.js

@@ -1,34 +1,54 @@
-import React from "react";
-import {useState} from "react";
+import React, {useState} from "react";
 import {
-  useAsyncCallback,
-  useAsyncWatcher,
+  useAsyncCallback
 } from "../../lib/use-async-effect";
-import cpAxios from "cp-axios";
-import {CPromise} from "c-promise2"
+import {CPromise} from "c-promise2";
 
 export default function TestComponent7(props) {
-  const [text, setText] = useState("");
-  const [value, setValue] = useState(0);
-  const [input, setInput] = useState("");
-
-  const [fn, cancel, pending, done, result, err, canceled, paused] = useAsyncCallback(function* () {
-    for(const stage of ['stage1', 'stage2', 'stage3', 'stage4', 'stage5']){
-      setText(`Stage: ${stage}`);
-      yield CPromise.delay(1000);
-    }
-    return "Done";
-  }, {states: true, deps: [value]})
+  const [text, setText] = useState("one two three four five");
+  const [word, setWord] = useState("");
 
+  const go = useAsyncCallback(
+    function* (text, delay) {
+      const words = text.split(/\s+/);
+      for (const word of words) {
+        setWord(word);
+        yield CPromise.delay(delay);
+      }
+    },
+    { states: true, cancelPrevios: true }
+  );
 
   return (
     <div className="component">
-      <div className="caption">useAsyncCallback pause demo:</div>
-      <div>{text}</div>
-      <div>{pending ? "loading..." : (done ? err ? err.toString() : JSON.stringify(result, null, 2) : "")}</div>
-      <button onClick={fn} disabled={pending}>Run</button>
-      <button onClick={paused? fn.resume : fn.pause} disabled={!pending}>{paused? "Resume" : "Pause"}</button>
-      <button onClick={cancel} disabled={!pending}>Cancel async effect</button>
+      <div className="caption">useAsyncEffect demo</div>
+      <input
+        value={text}
+        onChange={({ target }) => {
+          setText(target.value);
+        }}
+      />
+      <div>{go.error ? go.error.toString() : word}</div>
+      {go.pending ? (
+        go.paused ? (
+          <button className="btn btn-warning" onClick={go.resume}>
+            Resume
+          </button>
+        ) : (
+          <button className="btn btn-warning" onClick={go.pause}>
+            Pause
+          </button>
+        )
+      ) : (
+        <button className="btn btn-warning" onClick={() => go(text, 1000)}>
+          Run
+        </button>
+      )}
+      {go.pending && (
+        <button className="btn btn-warning" onClick={go.cancel}>
+          Cancel request
+        </button>
+      )}
     </div>
   );
 }