@tamagui/use-controllable-state 1.0.0-beta.8 → 1.0.1-beta.100

package/dist/cjs/useControllableState.js

@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -35,28 +34,30 @@ function useControllableState({
   const propWins = strategy === "prop-wins";
   (0, import_react.useEffect)(() => {
     currentProp.current = prop;
-    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange));
-  }, [prop]);
+    setVal((prev) => {
+      return getNextStateWithCallback(prev, prop, handleChange);
+    });
+  }, [handleChange, prop]);
   return [
     val,
     (0, import_react.useCallback)((next) => {
       if (propWins && currentProp.current !== void 0) {
+        handleChange(next);
         return;
       }
       setVal((prev) => {
         return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, handleChange);
       });
-    }, [setVal, propWins])
+    }, [propWins, handleChange])
   ];
 }
-__name(useControllableState, "useControllableState");
-const getNextStateWithCallback = /* @__PURE__ */ __name((prev, next, handleChange) => {
+const getNextStateWithCallback = (prev, next, handleChange) => {
   if (prev === next || next === void 0) {
     return prev;
   }
   handleChange(next);
   return next;
-}, "getNextStateWithCallback");
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useControllableState

package/dist/cjs/useControllableState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useControllableState.ts"],
-  "sourcesContent": ["import { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\n// can configure to allow most-recent-wins or prop-wins\n// defaults to prop-wins\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const currentProp = useRef(prop)\n  const handleChange = useCallbackRef(onChange)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  useEffect(() => {\n    currentProp.current = prop\n    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange))\n  }, [prop])\n\n  return [\n    val,\n    useCallback(\n      (next: any) => {\n        if (propWins && currentProp.current !== undefined) {\n          return\n        }\n        setVal((prev) => {\n          return getNextStateWithCallback(\n            prev,\n            typeof next === 'function' ? next(prev) : next,\n            handleChange\n          )\n        })\n      },\n      [setVal, propWins]\n    ) as any,\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange: any) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  handleChange(next)\n  return next\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAA+B;AAC/B,mBAAgE;AAKzD,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,GAMoC;AAC/C,QAAM,cAAc,yBAAO,IAAI;AAC/B,QAAM,eAAe,kDAAe,QAAQ;AAC5C,QAAM,CAAC,KAAK,UAAU,2BAAS,QAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAE9B,8BAAU,MAAM;AACd,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS,yBAAyB,MAAM,MAAM,YAAY,CAAC;AAAA,EACrE,GAAG,CAAC,IAAI,CAAC;AAET,SAAO;AAAA,IACL;AAAA,IACA,8BACE,CAAC,SAAc;AACb,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,YACF;AAAA,MACF,CAAC;AAAA,IACH,GACA,CAAC,QAAQ,QAAQ,CACnB;AAAA,EACF;AACF;AAvCgB;AAyChB,MAAM,2BAA2B,wBAAC,MAAW,MAAW,iBAAsB;AAC5E,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,eAAa,IAAI;AACjB,SAAO;AACT,GANiC;",
+  "sourcesContent": ["import { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\n// can configure to allow most-recent-wins or prop-wins\n// defaults to prop-wins\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const currentProp = useRef(prop)\n  const handleChange = useCallbackRef(onChange)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  useEffect(() => {\n    currentProp.current = prop\n    setVal((prev) => {\n      return getNextStateWithCallback(prev, prop, handleChange)\n    })\n  }, [handleChange, prop])\n\n  return [\n    val,\n    useCallback(\n      (next: unknown) => {\n        if (propWins && currentProp.current !== undefined) {\n          handleChange(next as T)\n          return\n        }\n        setVal((prev) => {\n          return getNextStateWithCallback(\n            prev,\n            typeof next === 'function' ? next(prev) : next,\n            handleChange\n          )\n        })\n      },\n      [propWins, handleChange]\n    ),\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange: any) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  handleChange(next)\n  return next\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAA+B;AAC/B,mBAAgE;AAKzD,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,GAMoC;AAC/C,QAAM,cAAc,yBAAO,IAAI;AAC/B,QAAM,eAAe,kDAAe,QAAQ;AAC5C,QAAM,CAAC,KAAK,UAAU,2BAAS,QAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAE9B,8BAAU,MAAM;AACd,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS;AACf,aAAO,yBAAyB,MAAM,MAAM,YAAY;AAAA,IAC1D,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SAAO;AAAA,IACL;AAAA,IACA,8BACE,CAAC,SAAkB;AACjB,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD,qBAAa,IAAS;AACtB;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,YACF;AAAA,MACF,CAAC;AAAA,IACH,GACA,CAAC,UAAU,YAAY,CACzB;AAAA,EACF;AACF;AAEA,MAAM,2BAA2B,CAAC,MAAW,MAAW,iBAAsB;AAC5E,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,eAAa,IAAI;AACjB,SAAO;AACT;",
   "names": []
 }

package/dist/esm/useControllableState.js

@@ -1,5 +1,3 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 import { useCallback, useEffect, useRef, useState } from "react";
 function useControllableState({
@@ -10,32 +8,34 @@ function useControllableState({
 }) {
   const currentProp = useRef(prop);
   const handleChange = useCallbackRef(onChange);
-  const [val, setVal] = useState(prop != null ? prop : defaultProp);
+  const [val, setVal] = useState(prop ?? defaultProp);
   const propWins = strategy === "prop-wins";
   useEffect(() => {
     currentProp.current = prop;
-    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange));
-  }, [prop]);
+    setVal((prev) => {
+      return getNextStateWithCallback(prev, prop, handleChange);
+    });
+  }, [handleChange, prop]);
   return [
     val,
     useCallback((next) => {
       if (propWins && currentProp.current !== void 0) {
+        handleChange(next);
         return;
       }
       setVal((prev) => {
         return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, handleChange);
       });
-    }, [setVal, propWins])
+    }, [propWins, handleChange])
   ];
 }
-__name(useControllableState, "useControllableState");
-const getNextStateWithCallback = /* @__PURE__ */ __name((prev, next, handleChange) => {
+const getNextStateWithCallback = (prev, next, handleChange) => {
   if (prev === next || next === void 0) {
     return prev;
   }
   handleChange(next);
   return next;
-}, "getNextStateWithCallback");
+};
 export {
   useControllableState
 };

package/dist/esm/useControllableState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useControllableState.ts"],
-  "sourcesContent": ["import { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\n// can configure to allow most-recent-wins or prop-wins\n// defaults to prop-wins\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const currentProp = useRef(prop)\n  const handleChange = useCallbackRef(onChange)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  useEffect(() => {\n    currentProp.current = prop\n    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange))\n  }, [prop])\n\n  return [\n    val,\n    useCallback(\n      (next: any) => {\n        if (propWins && currentProp.current !== undefined) {\n          return\n        }\n        setVal((prev) => {\n          return getNextStateWithCallback(\n            prev,\n            typeof next === 'function' ? next(prev) : next,\n            handleChange\n          )\n        })\n      },\n      [setVal, propWins]\n    ) as any,\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange: any) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  handleChange(next)\n  return next\n}\n"],
-  "mappings": ";;AAAA;AACA;AAKO,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,GAMoC;AAC/C,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,eAAe,eAAe,QAAQ;AAC5C,QAAM,CAAC,KAAK,UAAU,SAAS,sBAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAE9B,YAAU,MAAM;AACd,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS,yBAAyB,MAAM,MAAM,YAAY,CAAC;AAAA,EACrE,GAAG,CAAC,IAAI,CAAC;AAET,SAAO;AAAA,IACL;AAAA,IACA,YACE,CAAC,SAAc;AACb,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,YACF;AAAA,MACF,CAAC;AAAA,IACH,GACA,CAAC,QAAQ,QAAQ,CACnB;AAAA,EACF;AACF;AAvCgB;AAyChB,MAAM,2BAA2B,wBAAC,MAAW,MAAW,iBAAsB;AAC5E,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,eAAa,IAAI;AACjB,SAAO;AACT,GANiC;",
+  "sourcesContent": ["import { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\n// can configure to allow most-recent-wins or prop-wins\n// defaults to prop-wins\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const currentProp = useRef(prop)\n  const handleChange = useCallbackRef(onChange)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  useEffect(() => {\n    currentProp.current = prop\n    setVal((prev) => {\n      return getNextStateWithCallback(prev, prop, handleChange)\n    })\n  }, [handleChange, prop])\n\n  return [\n    val,\n    useCallback(\n      (next: unknown) => {\n        if (propWins && currentProp.current !== undefined) {\n          handleChange(next as T)\n          return\n        }\n        setVal((prev) => {\n          return getNextStateWithCallback(\n            prev,\n            typeof next === 'function' ? next(prev) : next,\n            handleChange\n          )\n        })\n      },\n      [propWins, handleChange]\n    ),\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange: any) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  handleChange(next)\n  return next\n}\n"],
+  "mappings": "AAAA;AACA;AAKO,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,GAMoC;AAC/C,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,eAAe,eAAe,QAAQ;AAC5C,QAAM,CAAC,KAAK,UAAU,SAAS,QAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAE9B,YAAU,MAAM;AACd,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS;AACf,aAAO,yBAAyB,MAAM,MAAM,YAAY;AAAA,IAC1D,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SAAO;AAAA,IACL;AAAA,IACA,YACE,CAAC,SAAkB;AACjB,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD,qBAAa,IAAS;AACtB;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,YACF;AAAA,MACF,CAAC;AAAA,IACH,GACA,CAAC,UAAU,YAAY,CACzB;AAAA,EACF;AACF;AAEA,MAAM,2BAA2B,CAAC,MAAW,MAAW,iBAAsB;AAC5E,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,eAAa,IAAI;AACjB,SAAO;AACT;",
   "names": []
 }

package/dist/jsx/index.js

@@ -1 +1,2 @@
 export * from "./useControllableState";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './useControllableState'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/jsx/useControllableState.js

@@ -1,5 +1,3 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 import { useCallback, useEffect, useRef, useState } from "react";
 function useControllableState({
@@ -14,28 +12,31 @@ function useControllableState({
   const propWins = strategy === "prop-wins";
   useEffect(() => {
     currentProp.current = prop;
-    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange));
-  }, [prop]);
+    setVal((prev) => {
+      return getNextStateWithCallback(prev, prop, handleChange);
+    });
+  }, [handleChange, prop]);
   return [
     val,
     useCallback((next) => {
       if (propWins && currentProp.current !== void 0) {
+        handleChange(next);
         return;
       }
       setVal((prev) => {
         return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, handleChange);
       });
-    }, [setVal, propWins])
+    }, [propWins, handleChange])
   ];
 }
-__name(useControllableState, "useControllableState");
-const getNextStateWithCallback = /* @__PURE__ */ __name((prev, next, handleChange) => {
+const getNextStateWithCallback = (prev, next, handleChange) => {
   if (prev === next || next === void 0) {
     return prev;
   }
   handleChange(next);
   return next;
-}, "getNextStateWithCallback");
+};
 export {
   useControllableState
 };
+//# sourceMappingURL=useControllableState.js.map

package/dist/jsx/useControllableState.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useControllableState.ts"],
+  "sourcesContent": ["import { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\n// can configure to allow most-recent-wins or prop-wins\n// defaults to prop-wins\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const currentProp = useRef(prop)\n  const handleChange = useCallbackRef(onChange)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  useEffect(() => {\n    currentProp.current = prop\n    setVal((prev) => {\n      return getNextStateWithCallback(prev, prop, handleChange)\n    })\n  }, [handleChange, prop])\n\n  return [\n    val,\n    useCallback(\n      (next: unknown) => {\n        if (propWins && currentProp.current !== undefined) {\n          handleChange(next as T)\n          return\n        }\n        setVal((prev) => {\n          return getNextStateWithCallback(\n            prev,\n            typeof next === 'function' ? next(prev) : next,\n            handleChange\n          )\n        })\n      },\n      [propWins, handleChange]\n    ),\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange: any) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  handleChange(next)\n  return next\n}\n"],
+  "mappings": "AAAA;AACA;AAKO,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,GAMoC;AAC/C,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,eAAe,eAAe,QAAQ;AAC5C,QAAM,CAAC,KAAK,UAAU,SAAS,sBAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAE9B,YAAU,MAAM;AACd,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS;AACf,aAAO,yBAAyB,MAAM,MAAM,YAAY;AAAA,IAC1D,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SAAO;AAAA,IACL;AAAA,IACA,YACE,CAAC,SAAkB;AACjB,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD,qBAAa,IAAS;AACtB;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,YACF;AAAA,MACF,CAAC;AAAA,IACH,GACA,CAAC,UAAU,YAAY,CACzB;AAAA,EACF;AACF;AAEA,MAAM,2BAA2B,CAAC,MAAW,MAAW,iBAAsB;AAC5E,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,eAAa,IAAI;AACjB,SAAO;AACT;",
+  "names": []
+}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@tamagui/use-controllable-state",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.1-beta.100",
   "sideEffects": false,
   "source": "src/index.ts",
-  "typings": "types",
+  "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -25,7 +26,7 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-beta.8",
+    "@tamagui/build": "^1.0.1-beta.100",
     "react": "*",
     "react-dom": "*"
   },

package/src/index.ts

@@ -0,0 +1 @@
+export * from './useControllableState'

package/src/useControllableState.ts

@@ -0,0 +1,57 @@
+import { useCallbackRef } from '@radix-ui/react-use-callback-ref'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+// can configure to allow most-recent-wins or prop-wins
+// defaults to prop-wins
+
+export function useControllableState<T>({
+  prop,
+  defaultProp,
+  onChange,
+  strategy = 'prop-wins',
+}: {
+  prop?: T | undefined
+  defaultProp: T
+  onChange?: ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>
+  strategy?: 'prop-wins' | 'most-recent-wins'
+}): [T, React.Dispatch<React.SetStateAction<T>>] {
+  const currentProp = useRef(prop)
+  const handleChange = useCallbackRef(onChange)
+  const [val, setVal] = useState(prop ?? defaultProp)
+  const propWins = strategy === 'prop-wins'
+
+  useEffect(() => {
+    currentProp.current = prop
+    setVal((prev) => {
+      return getNextStateWithCallback(prev, prop, handleChange)
+    })
+  }, [handleChange, prop])
+
+  return [
+    val,
+    useCallback(
+      (next: unknown) => {
+        if (propWins && currentProp.current !== undefined) {
+          handleChange(next as T)
+          return
+        }
+        setVal((prev) => {
+          return getNextStateWithCallback(
+            prev,
+            typeof next === 'function' ? next(prev) : next,
+            handleChange
+          )
+        })
+      },
+      [propWins, handleChange]
+    ),
+  ]
+}
+
+const getNextStateWithCallback = (prev: any, next: any, handleChange: any) => {
+  if (prev === next || next === undefined) {
+    return prev
+  }
+  handleChange(next)
+  return next
+}

package/types/useControllableState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../src/useControllableState.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAKvE,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,QAAsB,GACvB,EAAE;IACD,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;IACpB,WAAW,EAAE,CAAC,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACxE,QAAQ,CAAC,EAAE,WAAW,GAAG,kBAAkB,CAAA;CAC5C,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CA6B/C"}
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../src/useControllableState.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAKvE,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,QAAsB,GACvB,EAAE;IACD,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;IACpB,WAAW,EAAE,CAAC,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACxE,QAAQ,CAAC,EAAE,WAAW,GAAG,kBAAkB,CAAA;CAC5C,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAgC/C"}

package/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}