@tamagui/use-controllable-state 1.0.1-beta.123 → 1.0.1-beta.126

package/dist/cjs/useControllableState.js

@@ -32,8 +32,8 @@ function useControllableState({
 }) {
   const [state, setState] = (0, import_react.useState)(prop ?? defaultProp);
   const previous = (0, import_react.useRef)(state);
-  const value = strategy === "prop-wins" ? prop : state;
-  const propWins = strategy === "prop-wins";
+  const propWins = strategy === "prop-wins" && prop !== void 0;
+  const value = propWins ? prop : state;
   const onChangeCb = (0, import_use_event.useEvent)(onChange || idFn);
   (0, import_react.useEffect)(() => {
     if (state !== previous.current) {
@@ -41,18 +41,18 @@ function useControllableState({
       onChangeCb(state);
     }
   }, [onChangeCb, state]);
-  return [
-    value,
-    (0, import_react.useCallback)((next) => {
-      if (preventUpdate)
-        return;
-      if (propWins) {
-        onChangeCb(next);
-      } else {
-        setState(next);
-      }
-    }, [preventUpdate, propWins, onChangeCb])
-  ];
+  const setter = (0, import_use_event.useEvent)((next) => {
+    if (preventUpdate)
+      return;
+    console.log("setting", propWins, prop, next);
+    if (propWins) {
+      const nextValue = typeof next === "function" ? next(previous.current) : next;
+      onChangeCb(nextValue);
+    } else {
+      setState(next);
+    }
+  });
+  return [value, setter];
 }
 const idFn = () => {
 };

package/dist/cjs/useControllableState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useControllableState.ts"],
-  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\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\ntype ChangeCb<T> = ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n  preventUpdate,\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ChangeCb<T>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n  preventUpdate?: boolean\n}): [T, (next: T) => void] {\n  const [state, setState] = useState(prop ?? defaultProp)\n  const previous = useRef<any>(state)\n  const value = strategy === 'prop-wins' ? prop : state\n  const propWins = strategy === 'prop-wins'\n  const onChangeCb = useEvent(onChange || idFn)\n\n  useEffect(() => {\n    if (state !== previous.current) {\n      previous.current = state\n      onChangeCb(state)\n    }\n  }, [onChangeCb, state])\n\n  return [\n    value as T,\n    useCallback(\n      (next: T) => {\n        if (preventUpdate) return\n        if (propWins) {\n          onChangeCb(next)\n        } else {\n          setState(next)\n        }\n      },\n      [preventUpdate, propWins, onChangeCb]\n    ),\n  ]\n}\n\nconst idFn = () => {}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,mBAAgE;AAOzD,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,GAOyB;AACzB,QAAM,CAAC,OAAO,YAAY,2BAAS,QAAQ,WAAW;AACtD,QAAM,WAAW,yBAAY,KAAK;AAClC,QAAM,QAAQ,aAAa,cAAc,OAAO;AAChD,QAAM,WAAW,aAAa;AAC9B,QAAM,aAAa,+BAAS,YAAY,IAAI;AAE5C,8BAAU,MAAM;AACd,QAAI,UAAU,SAAS,SAAS;AAC9B,eAAS,UAAU;AACnB,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,SAAO;AAAA,IACL;AAAA,IACA,8BACE,CAAC,SAAY;AACX,UAAI;AAAe;AACnB,UAAI,UAAU;AACZ,mBAAW,IAAI;AAAA,MACjB,OAAO;AACL,iBAAS,IAAI;AAAA,MACf;AAAA,IACF,GACA,CAAC,eAAe,UAAU,UAAU,CACtC;AAAA,EACF;AACF;AAEA,MAAM,OAAO,MAAM;AAAC;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\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\ntype ChangeCb<T> = ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n  preventUpdate,\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ChangeCb<T>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n  preventUpdate?: boolean\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const [state, setState] = useState(prop ?? defaultProp)\n  const previous = useRef<any>(state)\n  const propWins = strategy === 'prop-wins' && prop !== undefined\n  const value = propWins ? prop : state\n  const onChangeCb = useEvent(onChange || idFn)\n\n  useEffect(() => {\n    if (state !== previous.current) {\n      previous.current = state\n      onChangeCb(state)\n    }\n  }, [onChangeCb, state])\n\n  const setter = useEvent((next) => {\n    if (preventUpdate) return\n    console.log('setting', propWins, prop, next)\n    if (propWins) {\n      const nextValue = typeof next === 'function' ? next(previous.current) : next\n      onChangeCb(nextValue)\n    } else {\n      setState(next)\n    }\n  })\n\n  return [value as T, setter]\n}\n\nconst idFn = () => {}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,mBAAgE;AAOzD,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,GAO+C;AAC/C,QAAM,CAAC,OAAO,YAAY,2BAAS,QAAQ,WAAW;AACtD,QAAM,WAAW,yBAAY,KAAK;AAClC,QAAM,WAAW,aAAa,eAAe,SAAS;AACtD,QAAM,QAAQ,WAAW,OAAO;AAChC,QAAM,aAAa,+BAAS,YAAY,IAAI;AAE5C,8BAAU,MAAM;AACd,QAAI,UAAU,SAAS,SAAS;AAC9B,eAAS,UAAU;AACnB,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,SAAS,+BAAS,CAAC,SAAS;AAChC,QAAI;AAAe;AACnB,YAAQ,IAAI,WAAW,UAAU,MAAM,IAAI;AAC3C,QAAI,UAAU;AACZ,YAAM,YAAY,OAAO,SAAS,aAAa,KAAK,SAAS,OAAO,IAAI;AACxE,iBAAW,SAAS;AAAA,IACtB,OAAO;AACL,eAAS,IAAI;AAAA,IACf;AAAA,EACF,CAAC;AAED,SAAO,CAAC,OAAY,MAAM;AAC5B;AAEA,MAAM,OAAO,MAAM;AAAC;",
   "names": []
 }

package/dist/esm/useControllableState.js

@@ -1,5 +1,5 @@
 import { useEvent } from "@tamagui/use-event";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 function useControllableState({
   prop,
   defaultProp,
@@ -9,8 +9,8 @@ function useControllableState({
 }) {
   const [state, setState] = useState(prop ?? defaultProp);
   const previous = useRef(state);
-  const value = strategy === "prop-wins" ? prop : state;
-  const propWins = strategy === "prop-wins";
+  const propWins = strategy === "prop-wins" && prop !== void 0;
+  const value = propWins ? prop : state;
   const onChangeCb = useEvent(onChange || idFn);
   useEffect(() => {
     if (state !== previous.current) {
@@ -18,18 +18,18 @@ function useControllableState({
       onChangeCb(state);
     }
   }, [onChangeCb, state]);
-  return [
-    value,
-    useCallback((next) => {
-      if (preventUpdate)
-        return;
-      if (propWins) {
-        onChangeCb(next);
-      } else {
-        setState(next);
-      }
-    }, [preventUpdate, propWins, onChangeCb])
-  ];
+  const setter = useEvent((next) => {
+    if (preventUpdate)
+      return;
+    console.log("setting", propWins, prop, next);
+    if (propWins) {
+      const nextValue = typeof next === "function" ? next(previous.current) : next;
+      onChangeCb(nextValue);
+    } else {
+      setState(next);
+    }
+  });
+  return [value, setter];
 }
 const idFn = () => {
 };

package/dist/esm/useControllableState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useControllableState.ts"],
-  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\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\ntype ChangeCb<T> = ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n  preventUpdate,\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ChangeCb<T>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n  preventUpdate?: boolean\n}): [T, (next: T) => void] {\n  const [state, setState] = useState(prop ?? defaultProp)\n  const previous = useRef<any>(state)\n  const value = strategy === 'prop-wins' ? prop : state\n  const propWins = strategy === 'prop-wins'\n  const onChangeCb = useEvent(onChange || idFn)\n\n  useEffect(() => {\n    if (state !== previous.current) {\n      previous.current = state\n      onChangeCb(state)\n    }\n  }, [onChangeCb, state])\n\n  return [\n    value as T,\n    useCallback(\n      (next: T) => {\n        if (preventUpdate) return\n        if (propWins) {\n          onChangeCb(next)\n        } else {\n          setState(next)\n        }\n      },\n      [preventUpdate, propWins, onChangeCb]\n    ),\n  ]\n}\n\nconst idFn = () => {}\n"],
-  "mappings": "AAAA;AACA;AAOO,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,GAOyB;AACzB,QAAM,CAAC,OAAO,YAAY,SAAS,QAAQ,WAAW;AACtD,QAAM,WAAW,OAAY,KAAK;AAClC,QAAM,QAAQ,aAAa,cAAc,OAAO;AAChD,QAAM,WAAW,aAAa;AAC9B,QAAM,aAAa,SAAS,YAAY,IAAI;AAE5C,YAAU,MAAM;AACd,QAAI,UAAU,SAAS,SAAS;AAC9B,eAAS,UAAU;AACnB,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,SAAO;AAAA,IACL;AAAA,IACA,YACE,CAAC,SAAY;AACX,UAAI;AAAe;AACnB,UAAI,UAAU;AACZ,mBAAW,IAAI;AAAA,MACjB,OAAO;AACL,iBAAS,IAAI;AAAA,MACf;AAAA,IACF,GACA,CAAC,eAAe,UAAU,UAAU,CACtC;AAAA,EACF;AACF;AAEA,MAAM,OAAO,MAAM;AAAC;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\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\ntype ChangeCb<T> = ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n  preventUpdate,\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ChangeCb<T>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n  preventUpdate?: boolean\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const [state, setState] = useState(prop ?? defaultProp)\n  const previous = useRef<any>(state)\n  const propWins = strategy === 'prop-wins' && prop !== undefined\n  const value = propWins ? prop : state\n  const onChangeCb = useEvent(onChange || idFn)\n\n  useEffect(() => {\n    if (state !== previous.current) {\n      previous.current = state\n      onChangeCb(state)\n    }\n  }, [onChangeCb, state])\n\n  const setter = useEvent((next) => {\n    if (preventUpdate) return\n    console.log('setting', propWins, prop, next)\n    if (propWins) {\n      const nextValue = typeof next === 'function' ? next(previous.current) : next\n      onChangeCb(nextValue)\n    } else {\n      setState(next)\n    }\n  })\n\n  return [value as T, setter]\n}\n\nconst idFn = () => {}\n"],
+  "mappings": "AAAA;AACA;AAOO,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,GAO+C;AAC/C,QAAM,CAAC,OAAO,YAAY,SAAS,QAAQ,WAAW;AACtD,QAAM,WAAW,OAAY,KAAK;AAClC,QAAM,WAAW,aAAa,eAAe,SAAS;AACtD,QAAM,QAAQ,WAAW,OAAO;AAChC,QAAM,aAAa,SAAS,YAAY,IAAI;AAE5C,YAAU,MAAM;AACd,QAAI,UAAU,SAAS,SAAS;AAC9B,eAAS,UAAU;AACnB,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,SAAS,SAAS,CAAC,SAAS;AAChC,QAAI;AAAe;AACnB,YAAQ,IAAI,WAAW,UAAU,MAAM,IAAI;AAC3C,QAAI,UAAU;AACZ,YAAM,YAAY,OAAO,SAAS,aAAa,KAAK,SAAS,OAAO,IAAI;AACxE,iBAAW,SAAS;AAAA,IACtB,OAAO;AACL,eAAS,IAAI;AAAA,IACf;AAAA,EACF,CAAC;AAED,SAAO,CAAC,OAAY,MAAM;AAC5B;AAEA,MAAM,OAAO,MAAM;AAAC;",
   "names": []
 }

package/dist/jsx/useControllableState.js

@@ -1,5 +1,5 @@
 import { useEvent } from "@tamagui/use-event";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 function useControllableState({
   prop,
   defaultProp,
@@ -9,8 +9,8 @@ function useControllableState({
 }) {
   const [state, setState] = useState(prop != null ? prop : defaultProp);
   const previous = useRef(state);
-  const value = strategy === "prop-wins" ? prop : state;
-  const propWins = strategy === "prop-wins";
+  const propWins = strategy === "prop-wins" && prop !== void 0;
+  const value = propWins ? prop : state;
   const onChangeCb = useEvent(onChange || idFn);
   useEffect(() => {
     if (state !== previous.current) {
@@ -18,18 +18,18 @@ function useControllableState({
       onChangeCb(state);
     }
   }, [onChangeCb, state]);
-  return [
-    value,
-    useCallback((next) => {
-      if (preventUpdate)
-        return;
-      if (propWins) {
-        onChangeCb(next);
-      } else {
-        setState(next);
-      }
-    }, [preventUpdate, propWins, onChangeCb])
-  ];
+  const setter = useEvent((next) => {
+    if (preventUpdate)
+      return;
+    console.log("setting", propWins, prop, next);
+    if (propWins) {
+      const nextValue = typeof next === "function" ? next(previous.current) : next;
+      onChangeCb(nextValue);
+    } else {
+      setState(next);
+    }
+  });
+  return [value, setter];
 }
 const idFn = () => {
 };

package/dist/jsx/useControllableState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useControllableState.ts"],
-  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\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\ntype ChangeCb<T> = ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n  preventUpdate,\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ChangeCb<T>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n  preventUpdate?: boolean\n}): [T, (next: T) => void] {\n  const [state, setState] = useState(prop ?? defaultProp)\n  const previous = useRef<any>(state)\n  const value = strategy === 'prop-wins' ? prop : state\n  const propWins = strategy === 'prop-wins'\n  const onChangeCb = useEvent(onChange || idFn)\n\n  useEffect(() => {\n    if (state !== previous.current) {\n      previous.current = state\n      onChangeCb(state)\n    }\n  }, [onChangeCb, state])\n\n  return [\n    value as T,\n    useCallback(\n      (next: T) => {\n        if (preventUpdate) return\n        if (propWins) {\n          onChangeCb(next)\n        } else {\n          setState(next)\n        }\n      },\n      [preventUpdate, propWins, onChangeCb]\n    ),\n  ]\n}\n\nconst idFn = () => {}\n"],
-  "mappings": "AAAA;AACA;AAOO,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,GAOyB;AACzB,QAAM,CAAC,OAAO,YAAY,SAAS,sBAAQ,WAAW;AACtD,QAAM,WAAW,OAAY,KAAK;AAClC,QAAM,QAAQ,aAAa,cAAc,OAAO;AAChD,QAAM,WAAW,aAAa;AAC9B,QAAM,aAAa,SAAS,YAAY,IAAI;AAE5C,YAAU,MAAM;AACd,QAAI,UAAU,SAAS,SAAS;AAC9B,eAAS,UAAU;AACnB,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,SAAO;AAAA,IACL;AAAA,IACA,YACE,CAAC,SAAY;AACX,UAAI;AAAe;AACnB,UAAI,UAAU;AACZ,mBAAW,IAAI;AAAA,MACjB,OAAO;AACL,iBAAS,IAAI;AAAA,MACf;AAAA,IACF,GACA,CAAC,eAAe,UAAU,UAAU,CACtC;AAAA,EACF;AACF;AAEA,MAAM,OAAO,MAAM;AAAC;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\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\ntype ChangeCb<T> = ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n  preventUpdate,\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ChangeCb<T>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n  preventUpdate?: boolean\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const [state, setState] = useState(prop ?? defaultProp)\n  const previous = useRef<any>(state)\n  const propWins = strategy === 'prop-wins' && prop !== undefined\n  const value = propWins ? prop : state\n  const onChangeCb = useEvent(onChange || idFn)\n\n  useEffect(() => {\n    if (state !== previous.current) {\n      previous.current = state\n      onChangeCb(state)\n    }\n  }, [onChangeCb, state])\n\n  const setter = useEvent((next) => {\n    if (preventUpdate) return\n    console.log('setting', propWins, prop, next)\n    if (propWins) {\n      const nextValue = typeof next === 'function' ? next(previous.current) : next\n      onChangeCb(nextValue)\n    } else {\n      setState(next)\n    }\n  })\n\n  return [value as T, setter]\n}\n\nconst idFn = () => {}\n"],
+  "mappings": "AAAA;AACA;AAOO,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,GAO+C;AAC/C,QAAM,CAAC,OAAO,YAAY,SAAS,sBAAQ,WAAW;AACtD,QAAM,WAAW,OAAY,KAAK;AAClC,QAAM,WAAW,aAAa,eAAe,SAAS;AACtD,QAAM,QAAQ,WAAW,OAAO;AAChC,QAAM,aAAa,SAAS,YAAY,IAAI;AAE5C,YAAU,MAAM;AACd,QAAI,UAAU,SAAS,SAAS;AAC9B,eAAS,UAAU;AACnB,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,SAAS,SAAS,CAAC,SAAS;AAChC,QAAI;AAAe;AACnB,YAAQ,IAAI,WAAW,UAAU,MAAM,IAAI;AAC3C,QAAI,UAAU;AACZ,YAAM,YAAY,OAAO,SAAS,aAAa,KAAK,SAAS,OAAO,IAAI;AACxE,iBAAW,SAAS;AAAA,IACtB,OAAO;AACL,eAAS,IAAI;AAAA,IACf;AAAA,EACF,CAAC;AAED,SAAO,CAAC,OAAY,MAAM;AAC5B;AAEA,MAAM,OAAO,MAAM;AAAC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/use-controllable-state",
-  "version": "1.0.1-beta.123",
+  "version": "1.0.1-beta.126",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -19,14 +19,14 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/use-event": "^1.0.1-beta.123"
+    "@tamagui/use-event": "^1.0.1-beta.126"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.123",
+    "@tamagui/build": "^1.0.1-beta.126",
     "react": "*",
     "react-dom": "*"
   },

package/src/useControllableState.ts

@@ -18,11 +18,11 @@ export function useControllableState<T>({
   onChange?: ChangeCb<T>
   strategy?: 'prop-wins' | 'most-recent-wins'
   preventUpdate?: boolean
-}): [T, (next: T) => void] {
+}): [T, React.Dispatch<React.SetStateAction<T>>] {
   const [state, setState] = useState(prop ?? defaultProp)
   const previous = useRef<any>(state)
-  const value = strategy === 'prop-wins' ? prop : state
-  const propWins = strategy === 'prop-wins'
+  const propWins = strategy === 'prop-wins' && prop !== undefined
+  const value = propWins ? prop : state
   const onChangeCb = useEvent(onChange || idFn)
 
   useEffect(() => {
@@ -32,20 +32,18 @@ export function useControllableState<T>({
     }
   }, [onChangeCb, state])
 
-  return [
-    value as T,
-    useCallback(
-      (next: T) => {
-        if (preventUpdate) return
-        if (propWins) {
-          onChangeCb(next)
-        } else {
-          setState(next)
-        }
-      },
-      [preventUpdate, propWins, onChangeCb]
-    ),
-  ]
+  const setter = useEvent((next) => {
+    if (preventUpdate) return
+    console.log('setting', propWins, prop, next)
+    if (propWins) {
+      const nextValue = typeof next === 'function' ? next(previous.current) : next
+      onChangeCb(nextValue)
+    } else {
+      setState(next)
+    }
+  })
+
+  return [value as T, setter]
 }
 
 const idFn = () => {}

package/types/useControllableState.d.ts

@@ -6,6 +6,6 @@ export declare function useControllableState<T>({ prop, defaultProp, onChange, s
     onChange?: ChangeCb<T>;
     strategy?: 'prop-wins' | 'most-recent-wins';
     preventUpdate?: boolean;
-}): [T, (next: T) => void];
+}): [T, React.Dispatch<React.SetStateAction<T>>];
 export {};
 //# sourceMappingURL=useControllableState.d.ts.map

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"}

package/types/useControllableState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../src/useControllableState.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAKvE,aAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;AAEhF,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,QAAsB,EACtB,aAAa,GACd,EAAE;IACD,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;IACpB,WAAW,EAAE,CAAC,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IACtB,QAAQ,CAAC,EAAE,WAAW,GAAG,kBAAkB,CAAA;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CA4BzB"}