fixed useStateEX to keep onchange with latest state

Author: shaipetel

package-lock.json

@@ -61,7 +61,7 @@
     "dependencies": {
         "@fluentui/react-datepicker-compat": "^0.4.53",
         "@fluentui/react-timepicker-compat": "^0.2.42",
-        "@kwiz/common": "^1.0.120",
+        "@kwiz/common": "^1.0.128",
         "@mismerge/core": "^1.2.1",
         "@mismerge/react": "^1.0.1",
         "esbuild": "^0.19.12",

package.json

@@ -1,5 +1,5 @@
 import { makeStyles } from "@fluentui/react-components";
-import { isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
+import { isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, jsonClone, jsonStringify, LoggerLevel, objectsEqual } from "@kwiz/common";
 import { HTMLAttributes, MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
 import { GetLogger } from "../_modules/config";
 import { mixins } from "../styles/styles";
@@ -8,7 +8,7 @@ import { mixins } from "../styles/styles";
 export const useEffectOnlyOnMount = [];
 
 type stateExOptions<ValueType> = {
-    onChange?: (newValue: SetStateAction<ValueType>, isValueChanged: boolean) => SetStateAction<ValueType>;
+    onChange?: (newValue: ValueType, isValueChanged: boolean) => ValueType;
     //will not set state if value did not change
     skipUpdateIfSame?: boolean;
     //optional, provide a name for better logging
@@ -38,8 +38,18 @@ export function useStateEX<ValueType>(initialValue: ValueType, options?: stateEx
     let logger = GetLogger(`useStateWithTrack${isNullOrEmptyString(name) ? '' : ` ${name}`}`);
     logger.setLevel(LoggerLevel.WARN);
 
-    const [value, setValueInState] = useState(initialValue);
-    const currentValue = useRef(value);
+    const [value, setValueInState] = useState<ValueType>(initialValue);
+
+    const currentValue = useRef<ValueType>();
+    //json clone complex/ref values so we can compare if value changed, in case caller makes chagnes on the value object directly.
+    const currentValueForChecks = useRef<ValueType>();
+    useEffect(() => {
+        updateCurrentRef(initialValue);
+    }, useEffectOnlyOnMount);
+
+    //keep a ref to onChange so the caller's latet state is accessible
+    const onChange = useRef(options.onChange);
+    onChange.current = options.onChange;
 
     /** make this a collection in case several callers are awaiting the same propr update */
     const resolveState = useRef<((v: ValueType) => void)[]>([]);
@@ -62,53 +72,42 @@ export function useStateEX<ValueType>(initialValue: ValueType, options?: stateEx
     };
     useEffect(() => {
         resolvePromises();
-        if (isNotEmptyArray(resolveState.current)) {
-            logger.log(`resolved after render`);
-            let resolvers = resolveState.current.slice();
-            resolveState.current = [];//clear
-            resolvers.map(r => r(value));
-        }
-    }, [value, resolveState.current]);
+    }, [value]);
 
     function getIsValueChanged(newValue: ValueType): boolean {
+        let error: Error = null;
         let result: boolean;
-        if (!objectsEqual(newValue as object, currentValue.current as object)) {
+        try {
+            if (!objectsEqual(newValue as object, currentValueForChecks.current as object)) {
+                result = true;
+            }
+            else {
+                result = false;
+            }
+        } catch (e) {
+            error = e;
             result = true;
         }
-        else {
-            result = false;
-        }
 
         return logger.groupSync(result ? 'value changed' : 'value not changed', log => {
             if (logger.getLevel() === LoggerLevel.VERBOSE) {
-                log('old: ' + extractStringValue(currentValue.current));
+                log('old: ' + extractStringValue(currentValueForChecks.current));
                 log('new: ' + extractStringValue(newValue));
+                if (error) log({ label: "Error", value: error });
             }
             return result;
         });
     };
-
-    let setValueWithCheck = !options.skipUpdateIfSame ? setValueInState : (newValue: ValueType) => {
-        const isValueChanged = getIsValueChanged(newValue);
-        if (isValueChanged) {
-            setValueInState(newValue);
-        }
-        else {
-            resolvePromises();
-        }
-    }
-
-
-    let setValueWithEvents = wrapFunction(setValueWithCheck, {
-        before: (newValue: ValueType) => isFunction(options.onChange) ? options.onChange(newValue, getIsValueChanged(newValue)) : newValue,
-        after: (newValue: ValueType) => currentValue.current = isPrimitiveValue(newValue) || isFunction(newValue)
+    function updateCurrentRef(newValue: ValueType) {
+        currentValue.current = newValue;
+        currentValueForChecks.current = isPrimitiveValue(newValue) || isFunction(newValue)
             ? newValue
             //fix skipUpdateIfSame for complex objects
             //if we don't clone it, currentValue.current will be a ref to the value in the owner
             //and will be treated as unchanged object, and it will be out of sync
             //this leads to skipUpdateIfSame failing after just 1 unchanged update
-            : jsonClone(newValue) as ValueType
-    });
+            : jsonClone(newValue) as ValueType;
+    }
 
     const setValue = useCallback((newState: ValueType) => new Promise<ValueType>(resolve => {
         if (!isMounted.current) {
@@ -118,9 +117,22 @@ export function useStateEX<ValueType>(initialValue: ValueType, options?: stateEx
         }
         else {
             resolveState.current.push(resolve);
-            setValueWithEvents(newState);
+            const isChanged = isFunction(onChange.current) || options.skipUpdateIfSame
+                ? getIsValueChanged(newState)//don't call this if there is no onChange handler and if we don't need to monitor skipUpdateIfSame
+                : true;
+            if (isFunction(onChange.current))
+                newState = onChange.current(newState, isChanged);
+
+            //keep current value ref up to date
+            updateCurrentRef(newState);
+
+            //set state
+            if (!options.skipUpdateIfSame || isChanged)
+                setValueInState(newState);
+            else//don't set in state - just resolve pending promises, UI will not be updated.
+                resolvePromises();
         }
-    }), []);
+    }), useEffectOnlyOnMount);
 
     return [value, setValue, currentValue];
 }