rc-util - npm Package Compare versions

Comparing version 5.22.3 to 5.22.4-0

es/hooks/useEvent.js

@@ -14,3 +14,3 @@ import * as React from 'react';
   }, []);
-  return callback ? memoFn : undefined;
+  return memoFn;
 }

es/hooks/useMergedState.js

@@ -6,2 +6,25 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import useState from './useState';
+var Source;
+
+(function (Source) {
+  Source[Source["INNER"] = 0] = "INNER";
+  Source[Source["PROP"] = 1] = "PROP";
+})(Source || (Source = {}));
+
+var useUpdateEffect = function useUpdateEffect(callback, deps) {
+  var _React$useState = React.useState(true),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      firstMount = _React$useState2[0],
+      setFirstMount = _React$useState2[1];
+
+  useLayoutEffect(function () {
+    if (!firstMount) {
+      return callback();
+    }
+  }, deps); // We tell react that first mount has passed
+
+  useLayoutEffect(function () {
+    setFirstMount(false);
+  }, []);
+};
 /**
@@ -12,2 +35,3 @@ * Similar to `useState` but will use props value if provided.
 
+
 export default function useMergedState(defaultStateValue, option) {
@@ -18,52 +42,70 @@ var _ref = option || {},
       onChange = _ref.onChange,
-      postState = _ref.postState;
+      postState = _ref.postState; // ======================= Init =======================
 
+
   var _useState = useState(function () {
+    var finalValue = undefined;
+    var source;
+
     if (value !== undefined) {
-      return value;
+      finalValue = value;
+      source = Source.PROP;
+    } else if (defaultValue !== undefined) {
+      finalValue = typeof defaultValue === 'function' ? defaultValue() : defaultValue;
+      source = Source.PROP;
+    } else {
+      finalValue = typeof defaultStateValue === 'function' ? defaultStateValue() : defaultStateValue;
+      source = Source.INNER;
     }
 
-    if (defaultValue !== undefined) {
-      return typeof defaultValue === 'function' ? defaultValue() : defaultValue;
-    }
-
-    return typeof defaultStateValue === 'function' ? defaultStateValue() : defaultStateValue;
+    return [finalValue, source, finalValue];
   }),
       _useState2 = _slicedToArray(_useState, 2),
-      innerValue = _useState2[0],
-      setInnerValue = _useState2[1];
+      mergedValue = _useState2[0],
+      setMergedValue = _useState2[1];
 
-  var mergedValue = value !== undefined ? value : innerValue;
-  var postMergedValue = postState ? postState(mergedValue) : mergedValue; // setState
+  var postMergedValue = postState ? postState(mergedValue[0]) : mergedValue[0]; // ======================= Sync =======================
 
-  var onChangeFn = useEvent(onChange);
+  useUpdateEffect(function () {
+    setMergedValue(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 1),
+          prevValue = _ref3[0];
 
-  var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      changePrevValue = _useState4[0],
-      setChangePrevValue = _useState4[1];
+      return [value, Source.PROP, prevValue];
+    });
+  }, [value]); // ====================== Update ======================
 
+  var changeEventPrevRef = React.useRef();
   var triggerChange = useEvent(function (updater, ignoreDestroy) {
-    setChangePrevValue(mergedValue, true);
-    setInnerValue(function (prev) {
-      var nextValue = typeof updater === 'function' ? updater(prev) : updater;
-      return nextValue;
+    setMergedValue(function (prev) {
+      var _prev = _slicedToArray(prev, 3),
+          prevValue = _prev[0],
+          prevSource = _prev[1],
+          prevPrevValue = _prev[2];
+
+      var nextValue = typeof updater === 'function' ? updater(prevValue) : updater; // Do nothing if value not change
+
+      if (nextValue === prevValue) {
+        return prev;
+      } // Use prev prev value if is in a batch update to avoid missing data
+
+
+      var overridePrevValue = prevSource === Source.INNER && changeEventPrevRef.current !== prevPrevValue ? prevPrevValue : prevValue;
+      return [nextValue, Source.INNER, overridePrevValue];
     }, ignoreDestroy);
-  }); // Effect to trigger onChange
+  }); // ====================== Change ======================
 
+  var onChangeFn = useEvent(onChange);
   useLayoutEffect(function () {
-    if (changePrevValue !== undefined && changePrevValue !== innerValue) {
-      onChangeFn === null || onChangeFn === void 0 ? void 0 : onChangeFn(innerValue, changePrevValue);
-    }
-  }, [changePrevValue, innerValue, onChangeFn]); // Effect of reset value to `undefined`
+    var _mergedValue = _slicedToArray(mergedValue, 3),
+        current = _mergedValue[0],
+        source = _mergedValue[1],
+        prev = _mergedValue[2];
 
-  var prevValueRef = React.useRef(value);
-  React.useEffect(function () {
-    if (value === undefined && value !== prevValueRef.current) {
-      setInnerValue(value);
+    if (current !== prev && source === Source.INNER) {
+      onChangeFn(current, prev);
+      changeEventPrevRef.current = prev;
     }
-
-    prevValueRef.current = value;
-  }, [value]);
+  }, [mergedValue]);
   return [postMergedValue, triggerChange];
 }

lib/hooks/useEvent.js

@@ -24,3 +24,3 @@ "use strict";
   }, []);
-  return callback ? memoFn : undefined;
+  return memoFn;
 }

lib/hooks/useMergedState.js

@@ -20,4 +20,27 @@ "use strict";
 
-var _useState5 = _interopRequireDefault(require("./useState"));
+var _useState3 = _interopRequireDefault(require("./useState"));
 
+var Source;
+
+(function (Source) {
+  Source[Source["INNER"] = 0] = "INNER";
+  Source[Source["PROP"] = 1] = "PROP";
+})(Source || (Source = {}));
+
+var useUpdateEffect = function useUpdateEffect(callback, deps) {
+  var _React$useState = React.useState(true),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      firstMount = _React$useState2[0],
+      setFirstMount = _React$useState2[1];
+
+  (0, _useLayoutEffect.default)(function () {
+    if (!firstMount) {
+      return callback();
+    }
+  }, deps); // We tell react that first mount has passed
+
+  (0, _useLayoutEffect.default)(function () {
+    setFirstMount(false);
+  }, []);
+};
 /**
@@ -27,2 +50,4 @@ * Similar to `useState` but will use props value if provided.
  */
+
+
 function useMergedState(defaultStateValue, option) {
@@ -33,52 +58,70 @@ var _ref = option || {},
       onChange = _ref.onChange,
-      postState = _ref.postState;
+      postState = _ref.postState; // ======================= Init =======================
 
-  var _useState = (0, _useState5.default)(function () {
+
+  var _useState = (0, _useState3.default)(function () {
+    var finalValue = undefined;
+    var source;
+
     if (value !== undefined) {
-      return value;
+      finalValue = value;
+      source = Source.PROP;
+    } else if (defaultValue !== undefined) {
+      finalValue = typeof defaultValue === 'function' ? defaultValue() : defaultValue;
+      source = Source.PROP;
+    } else {
+      finalValue = typeof defaultStateValue === 'function' ? defaultStateValue() : defaultStateValue;
+      source = Source.INNER;
     }
 
-    if (defaultValue !== undefined) {
-      return typeof defaultValue === 'function' ? defaultValue() : defaultValue;
-    }
-
-    return typeof defaultStateValue === 'function' ? defaultStateValue() : defaultStateValue;
+    return [finalValue, source, finalValue];
   }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      innerValue = _useState2[0],
-      setInnerValue = _useState2[1];
+      mergedValue = _useState2[0],
+      setMergedValue = _useState2[1];
 
-  var mergedValue = value !== undefined ? value : innerValue;
-  var postMergedValue = postState ? postState(mergedValue) : mergedValue; // setState
+  var postMergedValue = postState ? postState(mergedValue[0]) : mergedValue[0]; // ======================= Sync =======================
 
-  var onChangeFn = (0, _useEvent.default)(onChange);
+  useUpdateEffect(function () {
+    setMergedValue(function (_ref2) {
+      var _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
+          prevValue = _ref3[0];
 
-  var _useState3 = (0, _useState5.default)(),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      changePrevValue = _useState4[0],
-      setChangePrevValue = _useState4[1];
+      return [value, Source.PROP, prevValue];
+    });
+  }, [value]); // ====================== Update ======================
 
+  var changeEventPrevRef = React.useRef();
   var triggerChange = (0, _useEvent.default)(function (updater, ignoreDestroy) {
-    setChangePrevValue(mergedValue, true);
-    setInnerValue(function (prev) {
-      var nextValue = typeof updater === 'function' ? updater(prev) : updater;
-      return nextValue;
+    setMergedValue(function (prev) {
+      var _prev = (0, _slicedToArray2.default)(prev, 3),
+          prevValue = _prev[0],
+          prevSource = _prev[1],
+          prevPrevValue = _prev[2];
+
+      var nextValue = typeof updater === 'function' ? updater(prevValue) : updater; // Do nothing if value not change
+
+      if (nextValue === prevValue) {
+        return prev;
+      } // Use prev prev value if is in a batch update to avoid missing data
+
+
+      var overridePrevValue = prevSource === Source.INNER && changeEventPrevRef.current !== prevPrevValue ? prevPrevValue : prevValue;
+      return [nextValue, Source.INNER, overridePrevValue];
     }, ignoreDestroy);
-  }); // Effect to trigger onChange
+  }); // ====================== Change ======================
 
+  var onChangeFn = (0, _useEvent.default)(onChange);
   (0, _useLayoutEffect.default)(function () {
-    if (changePrevValue !== undefined && changePrevValue !== innerValue) {
-      onChangeFn === null || onChangeFn === void 0 ? void 0 : onChangeFn(innerValue, changePrevValue);
-    }
-  }, [changePrevValue, innerValue, onChangeFn]); // Effect of reset value to `undefined`
+    var _mergedValue = (0, _slicedToArray2.default)(mergedValue, 3),
+        current = _mergedValue[0],
+        source = _mergedValue[1],
+        prev = _mergedValue[2];
 
-  var prevValueRef = React.useRef(value);
-  React.useEffect(function () {
-    if (value === undefined && value !== prevValueRef.current) {
-      setInnerValue(value);
+    if (current !== prev && source === Source.INNER) {
+      onChangeFn(current, prev);
+      changeEventPrevRef.current = prev;
     }
-
-    prevValueRef.current = value;
-  }, [value]);
+  }, [mergedValue]);
   return [postMergedValue, triggerChange];
 }

package.json

 {
   "name": "rc-util",
-  "version": "5.22.3",
+  "version": "5.22.4-0",
   "description": "Common Utils For React Component",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

209540

increased by4.9%

Number of package files

166

increased by2.47%

Lines of code

6311

increased by3.73%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

23

increased by64.29%

No dependency changes