@os-design/use-forwarded-state 1.0.29 → 1.0.31

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAEf,UAAU,sBAAsB,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAMD,QAAA,MAAM,iBAAiB,GAAI,CAAC,sCAIzB,sBAAsB,CAAC,CAAC,CAAC,KAAG,CAC7B,CAAC,GAAG,SAAS,EACb,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CA4BxC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAEf,UAAU,sBAAsB,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAMD,QAAA,MAAM,iBAAiB,GAAI,CAAC,EAAE,oCAI3B,sBAAsB,CAAC,CAAC,CAAC,KAAG,CAC7B,CAAC,GAAG,SAAS,EACb,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAsCxC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/index.js

@@ -6,17 +6,29 @@ const useForwardedState = ({
   onChange
 }) => {
   const [innerValue, setInnerValue] = useState(defaultValue);
+  const shouldUseInnerValue = useMemo(() => value === undefined, [value]);
+  const forwardedValue = useMemo(() => shouldUseInnerValue ? innerValue : value, [shouldUseInnerValue, innerValue, value]);
   const onChangeRef = useRef(onChange);
   useEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  const shouldUseInnerValue = useMemo(() => value === undefined, [value]);
-  const forwardedValue = useMemo(() => shouldUseInnerValue ? innerValue : value, [shouldUseInnerValue, innerValue, value]);
+  const forwardedValueRef = useRef(forwardedValue);
+  useEffect(() => {
+    forwardedValueRef.current = forwardedValue;
+  }, [forwardedValue]);
+  const shouldUseInnerValueRef = useRef(shouldUseInnerValue);
+  useEffect(() => {
+    shouldUseInnerValueRef.current = shouldUseInnerValue;
+  }, [shouldUseInnerValue]);
   const setForwardedValue = useCallback(v => {
-    const nextValue = isFunction(v) ? v(forwardedValue) : v;
-    if (shouldUseInnerValue) setInnerValue(nextValue);
-    if (onChangeRef.current && nextValue !== undefined) onChangeRef.current(nextValue);
-  }, [forwardedValue, shouldUseInnerValue]);
+    const nextValue = isFunction(v) ? v(forwardedValueRef.current) : v;
+    if (shouldUseInnerValueRef.current) {
+      setInnerValue(nextValue);
+    }
+    if (onChangeRef.current && nextValue !== undefined) {
+      onChangeRef.current(nextValue);
+    }
+  }, []);
   return [forwardedValue, setForwardedValue];
 };
 export default useForwardedState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/use-forwarded-state",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "type": "module",
@@ -23,13 +23,13 @@
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist",
     "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --declarationDir dist",
     "build": "yarn clean && npm-run-all 'build:*'",
-    "ncu": "ncu -u"
+    "ncu": "ncu -u '/^(?!(react|@types/react)$).*$/'"
   },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": "18"
   },
-  "gitHead": "ed7b645f040dc652da07a9bd23a5983b0416f126"
+  "gitHead": "3388a0be685b906360094b92df493150162a666c"
 }

package/src/index.ts

@@ -27,11 +27,6 @@ const useForwardedState = <T>({
   Dispatch<SetStateAction<T | undefined>>,
 ] => {
   const [innerValue, setInnerValue] = useState(defaultValue);
-  const onChangeRef = useRef(onChange);
-
-  useEffect(() => {
-    onChangeRef.current = onChange;
-  }, [onChange]);
 
   const shouldUseInnerValue = useMemo(() => value === undefined, [value]);
   const forwardedValue = useMemo(
@@ -39,17 +34,32 @@ const useForwardedState = <T>({
     [shouldUseInnerValue, innerValue, value]
   );
 
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  const forwardedValueRef = useRef(forwardedValue);
+  useEffect(() => {
+    forwardedValueRef.current = forwardedValue;
+  }, [forwardedValue]);
+
+  const shouldUseInnerValueRef = useRef(shouldUseInnerValue);
+  useEffect(() => {
+    shouldUseInnerValueRef.current = shouldUseInnerValue;
+  }, [shouldUseInnerValue]);
+
   const setForwardedValue = useCallback<
     Dispatch<SetStateAction<T | undefined>>
-  >(
-    (v) => {
-      const nextValue = isFunction(v) ? v(forwardedValue) : v;
-      if (shouldUseInnerValue) setInnerValue(nextValue);
-      if (onChangeRef.current && nextValue !== undefined)
-        onChangeRef.current(nextValue);
-    },
-    [forwardedValue, shouldUseInnerValue]
-  );
+  >((v) => {
+    const nextValue = isFunction(v) ? v(forwardedValueRef.current) : v;
+    if (shouldUseInnerValueRef.current) {
+      setInnerValue(nextValue);
+    }
+    if (onChangeRef.current && nextValue !== undefined) {
+      onChangeRef.current(nextValue);
+    }
+  }, []);
 
   return [forwardedValue, setForwardedValue];
 };