Refactored useDeepState hook;

Removed support of old state resolving by `useDeepState` hook;
Added `once` option for `useAsyncEffect` hook;

Author: DigitalBrainJS

README.md

@@ -339,11 +339,11 @@ export default function TestComponent(props) {
       <div className="caption">useAsyncDeepState demo:</div>
       <div>{state.counter}</div>
       <button onClick={async()=>{
-        const [newState, oldState]= await setState((state)=> {
+        const newState= await setState((state)=> {
           return {counter: state.counter + 1}
         });
 
-        console.log(`Updated: ${newState.counter}, old: ${oldState.counter}`);
+        console.log(`Updated: ${newState.counter}`);
       }}>Inc</button>
       <button onClick={()=>setState({
         counter: state.counter

lib/use-async-effect.js

@@ -1,6 +1,6 @@
 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');
+const {isEqualObjects, cloneObject} = require('is-equal-objects');
 
 const {E_REASON_QUEUE_OVERFLOW, E_REASON_RESTART} = CanceledError.registerErrors({
     E_REASON_QUEUE_OVERFLOW: 'overflow',
@@ -51,6 +51,7 @@ const removeElement = (arr, element) => {
  * @param {deps} [options.deps= []]
  * @param {boolean} [options.skipFirst= false]
  * @param {boolean} [options.states= false]
+ * @param {boolean} [options.once= false]
  * @returns {UseAsyncEffectCancelFn}
  */
 const useAsyncEffect = (generator, options) => {
@@ -59,16 +60,19 @@ const useAsyncEffect = (generator, options) => {
     let {
         deps = [],
         skipFirst= false,
-        states = false
+        states = false,
+        once = false
     } = options && Array.isArray(options) ? {deps: options} : options || {};
 
-    const [state, setState]= states? useAsyncDeepState({
+    const initialState = {
         done: false,
         result: undefined,
         error: undefined,
         canceled: false,
         paused: false
-    }, {watch: false}) : [];
+    };
+
+    const [state, setState] = states ? useAsyncDeepState(initialState, {watch: false}) : [];
 
     if (!isGeneratorFn(generator)) {
         throw TypeError('useAsyncEffect requires a generator as the first argument');
@@ -100,8 +104,6 @@ const useAsyncEffect = (generator, options) => {
         return cancel;
     });
 
-
-
     useEffect(() => {
         if (!current.inited) {
             current.inited = true;
@@ -110,10 +112,19 @@ const useAsyncEffect = (generator, options) => {
             }
         }
 
+        if (once && current.done) {
+            return;
+        }
+
         let cb;
 
+        states && setState(initialState);
+
         let promise = current.promise = CPromise.run(generator, {resolveSignatures: true, scopeArg: true})
         .then(result => {
+
+            current.done = true;
+
             if (typeof result === 'function') {
                 cb = result;
                 states && setState({
@@ -464,112 +475,131 @@ const useFactory = (factory, args) => {
 
     initialized.add(current);
 
-    Object.assign(current, factory.apply(null, args));
-
-    return current;
+    return Object.assign(current, factory.apply(null, args));
 }
 
-const assignState= (obj, target)=>{
-    Object.assign(obj, target);
+const assignEnumerableProps = (source, target) => {
+    Object.assign(source, target);
     const symbols = Object.getOwnPropertySymbols(target);
     let i = symbols.length;
     while (i-- > 0) {
-        const symbol = symbols[i];
-        obj[symbol] = target[symbol];
+        let symbol = symbols[i];
+        source[symbol] = target[symbol];
     }
-    return obj;
+    return source;
 }
 
-class ProtoState {
-    constructor(initialState) {
-        initialState && assignState(this, initialState);
-    }
+const protoState = Object.create(null, {
+    toJSON: {
+        value: function toJSON(){
+            const obj = {};
+            let target = this;
+            do {
+                assignEnumerableProps(obj, target);
+            } while ((target = Object.getPrototypeOf(target)) && target !== Object.prototype);
+            return obj;
+        }
+    },
 
-    toJSON() {
-        const obj = {};
-        let target = this;
-        do {
-            assignState(obj, target);
-        } while ((target = Object.getPrototypeOf(target)) && target !== Object.prototype);
-        return obj;
+    [isEqualObjects.plainObject]: {
+        value: true
     }
-}
+})
+
+const getAllKeys = (obj) => Object.keys(obj).concat(Object.getOwnPropertyNames(obj));
 
 /**
  * useAsyncDeepState hook whose setter returns a promise
- * @param {*} [initialValue]
+ * @param {*} [initialState]
  * @param {Boolean} [watch= true]
+ * @param {Boolean} [defineSetters= true]
  * @returns {[any, function(*=, boolean=): (Promise<*>|undefined)]}
  */
-const useAsyncDeepState = (initialValue, {watch= true}= {}) => {
-    const {current} = useRef({});
+const useAsyncDeepState = (initialState, {watch = true, defineSetters = true}= {}) => {
 
-    if(!current.inited){
-        if (initialValue !== undefined && typeof initialValue !== "object") {
+    const current = useFactory(()=>{
+        if (initialState !== undefined && typeof initialState !== "object") {
             throw TypeError('initial state must be a plain object');
         }
 
-        const state = new ProtoState(initialValue);
+        const setter = (patch, scope, cb)=>{
+            setState((state)=>{
+                if (typeof patch === 'function') {
+                    patch = patch(state);
+                }
+
+                if (patch!==true && patch != null && typeof patch !== 'object') {
+                    throw new TypeError('patch must be a plain object or boolean');
+                }
+
+                if (
+                  patch !== true &&
+                  (patch === null || assignEnumerableProps(current.state, patch)) &&
+                  (!current.stateChanged && isEqualObjects(current.state, current.snapshot))
+                ) {
+                    scope && cb(state);
+                    return state;
+                }
+
+                current.stateChanged = true;
 
-        Object.assign(current, {
+                if (scope) {
+                    current.callbacks.set(scope, cb);
+                    scope.onDone(() => current.callbacks.delete(scope))
+                }
+
+                return Object.freeze(Object.create(current.proxy));
+            });
+        }
+
+        const state = assignEnumerableProps(Object.create(protoState), initialState)
+
+        const proxy = Object.create(state, defineSetters && getAllKeys(initialState)
+          .reduce((props, prop) => {
+              props[prop] = {
+                  get() {
+                      return state[prop];
+                  },
+                  set(value) {
+                      state[prop] = value;
+                      setter(null);
+                  }
+              }
+              return props;
+          }, {}));
+
+        return {
             state,
-            oldState: new ProtoState(initialValue),
-            callbacks: new Map()
-        })
-    }
+            snapshot: null,
+            proxy,
+            initialState: Object.freeze(Object.create(proxy)),
+            stateChanged: false,
+            callbacks: new Map(),
+            setter
+        }
+    });
 
-    const [state, setState] = useState(!current.inited && Object.freeze(Object.create(current.state)));
+    const [state, setState] = useState(current.initialState);
 
-    watch && useEffect(()=>{
-        if (!current.inited) return;
-        const data= [state, current.oldState];
-        current.callbacks.forEach(cb=> cb(data));
+    useEffect(()=>{
+        current.stateChanged = false;
+        current.callbacks.forEach(cb=> cb(state));
         current.callbacks.clear();
-        current.oldState= new ProtoState(current.state);
+        current.snapshot= cloneObject(current.state);
     }, [state]);
 
-    current.inited= true;
-
     return [
         state,
         /**
          * state async accessor
-         * @param {Object} [newState]
+         * @param {Object} [handlerOrPatch]
+         * @param {Boolean} [watchChanges= true]
          * @returns {Promise<*>|undefined}
          */
-        function (newState) {
-            const setter= (scope, cb)=>{
-                if (typeof newState === 'function') {
-                    newState = newState(current.state);
-                }
-
-                if (newState != null && typeof newState !== 'object') {
-                    throw new TypeError('new state must be a plain object');
-                }
-
-                setState((state)=>{
-                    if(newState == null || isEqualObjects(assignState(current.state, newState), current.oldState)){
-                        scope && cb([state, current.oldState]);
-                        return state;
-                    }
-
-                    if (scope) {
-                        current.callbacks.set(scope, cb);
-                        scope.onDone(() => current.callbacks.delete(scope))
-                    }
-
-                    return Object.freeze(Object.create(current.state));
-                });
-            }
-
-            if (!watch) {
-                setter();
-                return;
-            }
-
-            return new CPromise((resolve, reject, scope) => {
-                setter(scope, resolve);
-            });
+        function (handlerOrPatch, watchChanges= watch) {
+            return watchChanges ? new CPromise((resolve, reject, scope) => {
+                current.setter(handlerOrPatch, scope, resolve);
+            }) : current.setter(handlerOrPatch);
         }
     ]
 }

package-lock.json

@@ -84,8 +84,8 @@
     "commitLimit": false
   },
   "dependencies": {
-    "c-promise2": "^0.13.5",
-    "is-equal-objects": "^0.2.2"
+    "c-promise2": "^0.13.7",
+    "is-equal-objects": "^0.3.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0"

package.json

@@ -8,6 +8,7 @@ import TestComponent6 from "./TestComponent6";
 import TestComponent7 from "./TestComponent7";
 import TestComponent8 from "./TestComponent8";
 import TestComponent9 from "./TestComponent9";
+import LiveTest from "./states";
 
 export default class App extends React.Component {
   constructor(props) {
@@ -66,15 +67,16 @@ export default class App extends React.Component {
             Timeout [{this.state.timeout}]ms
           </label>
         </div>
-        <TestComponent1 url={this.state.url} timeout={this.state.timeout}></TestComponent1>
+{/*        <TestComponent1 url={this.state.url} timeout={this.state.timeout}></TestComponent1>
         <TestComponent2 url={this.state.url} timeout={this.state.timeout}></TestComponent2>
         <TestComponent3 url={this.state.url} timeout={this.state.timeout}></TestComponent3>
         <TestComponent4 url={this.state.url} timeout={this.state.timeout}></TestComponent4>
         <TestComponent5 url={this.state.url} timeout={this.state.timeout}></TestComponent5>
-        <TestComponent6 url={this.state.url} timeout={this.state.timeout}></TestComponent6>
+        <TestComponent6 url={this.state.url} timeout={this.state.timeout}></TestComponent6>*/}
         <TestComponent7 url={this.state.url} timeout={this.state.timeout}></TestComponent7>
-        <TestComponent8 url={this.state.url} timeout={this.state.timeout}></TestComponent8>
+{/*        <TestComponent8 url={this.state.url} timeout={this.state.timeout}></TestComponent8>
         <TestComponent9 url={this.state.url} timeout={this.state.timeout}></TestComponent9>
+        <LiveTest></LiveTest>*/}
         <button className="btn btn-danger" onClick={this.onClick}>
           Remount component
         </button>