@tamagui/use-controllable-state 1.0.1-beta.119 → 1.0.1-beta.122

package/dist/cjs/useControllableState.js

@@ -30,37 +30,38 @@ function useControllableState({
   strategy = "prop-wins",
   preventUpdate
 }) {
-  const currentProp = (0, import_react.useRef)(prop);
   const [val, setVal] = (0, import_react.useState)(prop ?? defaultProp);
   const propWins = strategy === "prop-wins";
-  if (currentProp.current !== prop && !preventUpdate) {
-    currentProp.current = prop;
-    setVal((prev) => {
-      return getNextStateWithCallback(prev, prop, onChange);
-    });
-  }
+  const onChangeCb = (0, import_use_event.useEvent)(onChange || idFn);
+  (0, import_react.useEffect)(() => {
+    const next = getNextState(val, prop);
+    if (next !== void 0 && next !== val) {
+      setVal(next);
+    }
+  }, [prop]);
+  (0, import_react.useEffect)(() => {
+    onChangeCb(val);
+  }, [onChangeCb, val]);
   return [
-    val,
+    propWins ? prop : val,
     (0, import_use_event.useEvent)((next) => {
       if (preventUpdate)
         return;
-      if (propWins && currentProp.current !== void 0) {
-        onChange == null ? void 0 : onChange(next);
+      if (propWins && prop !== void 0) {
         return;
       }
-      setVal((prev) => {
-        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, onChange);
-      });
+      setVal((prev) => getNextState(prev, typeof next === "function" ? next(prev) : next));
     })
   ];
 }
-const getNextStateWithCallback = (prev, next, handleChange) => {
+const getNextState = (prev, next) => {
   if (prev === next || next === void 0) {
     return prev;
   }
-  handleChange == null ? void 0 : handleChange(next);
   return next;
 };
+const idFn = () => {
+};
 // 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 { useEvent } from '@tamagui/use-event'\nimport React, { 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 currentProp = useRef(prop)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  // TODO can try no useEffect here right? just if()\n  if (currentProp.current !== prop && !preventUpdate) {\n    currentProp.current = prop\n    setVal((prev) => {\n      return getNextStateWithCallback(prev, prop, onChange)\n    })\n  }\n\n  return [\n    val,\n    useEvent((next: unknown) => {\n      if (preventUpdate) return\n      if (propWins && currentProp.current !== undefined) {\n        onChange?.(next as T)\n        return\n      }\n      setVal((prev) => {\n        return getNextStateWithCallback(\n          prev,\n          typeof next === 'function' ? next(prev) : next,\n          onChange\n        )\n      })\n    }),\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange?: ChangeCb<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,uBAAyB;AACzB,mBAAmD;AAO5C,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,GAO+C;AAC/C,QAAM,cAAc,yBAAO,IAAI;AAC/B,QAAM,CAAC,KAAK,UAAU,2BAAS,QAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAG9B,MAAI,YAAY,YAAY,QAAQ,CAAC,eAAe;AAClD,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS;AACf,aAAO,yBAAyB,MAAM,MAAM,QAAQ;AAAA,IACtD,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA,+BAAS,CAAC,SAAkB;AAC1B,UAAI;AAAe;AACnB,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD,6CAAW;AACX;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,QACF;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEA,MAAM,2BAA2B,CAAC,MAAW,MAAW,iBAAiC;AACvF,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,+CAAe;AACf,SAAO;AACT;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\nimport React, { 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 [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n  const onChangeCb = useEvent(onChange || idFn)\n\n  // sync prop to state\n  useEffect(() => {\n    const next = getNextState(val, prop)\n    if (next !== undefined && next !== val) {\n      setVal(next)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [prop])\n\n  useEffect(() => {\n    onChangeCb(val)\n  }, [onChangeCb, val])\n\n  return [\n    propWins ? (prop as T) : val,\n    useEvent((next: unknown) => {\n      if (preventUpdate) return\n      if (propWins && prop !== undefined) {\n        return\n      }\n      setVal((prev) => getNextState(prev, typeof next === 'function' ? next(prev) : next))\n    }),\n  ]\n}\n\nconst getNextState = (prev: any, next: any) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  return next\n}\n\nconst idFn = () => {}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,mBAAmD;AAO5C,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,GAO+C;AAC/C,QAAM,CAAC,KAAK,UAAU,2BAAS,QAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAC9B,QAAM,aAAa,+BAAS,YAAY,IAAI;AAG5C,8BAAU,MAAM;AACd,UAAM,OAAO,aAAa,KAAK,IAAI;AACnC,QAAI,SAAS,UAAa,SAAS,KAAK;AACtC,aAAO,IAAI;AAAA,IACb;AAAA,EAEF,GAAG,CAAC,IAAI,CAAC;AAET,8BAAU,MAAM;AACd,eAAW,GAAG;AAAA,EAChB,GAAG,CAAC,YAAY,GAAG,CAAC;AAEpB,SAAO;AAAA,IACL,WAAY,OAAa;AAAA,IACzB,+BAAS,CAAC,SAAkB;AAC1B,UAAI;AAAe;AACnB,UAAI,YAAY,SAAS,QAAW;AAClC;AAAA,MACF;AACA,aAAO,CAAC,SAAS,aAAa,MAAM,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,IAAI,CAAC;AAAA,IACrF,CAAC;AAAA,EACH;AACF;AAEA,MAAM,eAAe,CAAC,MAAW,SAAc;AAC7C,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,MAAM,OAAO,MAAM;AAAC;",
   "names": []
 }

package/dist/esm/useControllableState.js

@@ -1,5 +1,5 @@
 import { useEvent } from "@tamagui/use-event";
-import { useRef, useState } from "react";
+import { useEffect, useState } from "react";
 function useControllableState({
   prop,
   defaultProp,
@@ -7,37 +7,38 @@ function useControllableState({
   strategy = "prop-wins",
   preventUpdate
 }) {
-  const currentProp = useRef(prop);
   const [val, setVal] = useState(prop ?? defaultProp);
   const propWins = strategy === "prop-wins";
-  if (currentProp.current !== prop && !preventUpdate) {
-    currentProp.current = prop;
-    setVal((prev) => {
-      return getNextStateWithCallback(prev, prop, onChange);
-    });
-  }
+  const onChangeCb = useEvent(onChange || idFn);
+  useEffect(() => {
+    const next = getNextState(val, prop);
+    if (next !== void 0 && next !== val) {
+      setVal(next);
+    }
+  }, [prop]);
+  useEffect(() => {
+    onChangeCb(val);
+  }, [onChangeCb, val]);
   return [
-    val,
+    propWins ? prop : val,
     useEvent((next) => {
       if (preventUpdate)
         return;
-      if (propWins && currentProp.current !== void 0) {
-        onChange == null ? void 0 : onChange(next);
+      if (propWins && prop !== void 0) {
         return;
       }
-      setVal((prev) => {
-        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, onChange);
-      });
+      setVal((prev) => getNextState(prev, typeof next === "function" ? next(prev) : next));
     })
   ];
 }
-const getNextStateWithCallback = (prev, next, handleChange) => {
+const getNextState = (prev, next) => {
   if (prev === next || next === void 0) {
     return prev;
   }
-  handleChange == null ? void 0 : handleChange(next);
   return next;
 };
+const idFn = () => {
+};
 export {
   useControllableState
 };

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, { 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 currentProp = useRef(prop)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  // TODO can try no useEffect here right? just if()\n  if (currentProp.current !== prop && !preventUpdate) {\n    currentProp.current = prop\n    setVal((prev) => {\n      return getNextStateWithCallback(prev, prop, onChange)\n    })\n  }\n\n  return [\n    val,\n    useEvent((next: unknown) => {\n      if (preventUpdate) return\n      if (propWins && currentProp.current !== undefined) {\n        onChange?.(next as T)\n        return\n      }\n      setVal((prev) => {\n        return getNextStateWithCallback(\n          prev,\n          typeof next === 'function' ? next(prev) : next,\n          onChange\n        )\n      })\n    }),\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange?: ChangeCb<any>) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  handleChange?.(next)\n  return next\n}\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,IAAI;AAC/B,QAAM,CAAC,KAAK,UAAU,SAAS,QAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAG9B,MAAI,YAAY,YAAY,QAAQ,CAAC,eAAe;AAClD,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS;AACf,aAAO,yBAAyB,MAAM,MAAM,QAAQ;AAAA,IACtD,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA,SAAS,CAAC,SAAkB;AAC1B,UAAI;AAAe;AACnB,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD,6CAAW;AACX;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,QACF;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEA,MAAM,2BAA2B,CAAC,MAAW,MAAW,iBAAiC;AACvF,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,+CAAe;AACf,SAAO;AACT;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\nimport React, { 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 [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n  const onChangeCb = useEvent(onChange || idFn)\n\n  // sync prop to state\n  useEffect(() => {\n    const next = getNextState(val, prop)\n    if (next !== undefined && next !== val) {\n      setVal(next)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [prop])\n\n  useEffect(() => {\n    onChangeCb(val)\n  }, [onChangeCb, val])\n\n  return [\n    propWins ? (prop as T) : val,\n    useEvent((next: unknown) => {\n      if (preventUpdate) return\n      if (propWins && prop !== undefined) {\n        return\n      }\n      setVal((prev) => getNextState(prev, typeof next === 'function' ? next(prev) : next))\n    }),\n  ]\n}\n\nconst getNextState = (prev: any, next: any) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  return next\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,KAAK,UAAU,SAAS,QAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAC9B,QAAM,aAAa,SAAS,YAAY,IAAI;AAG5C,YAAU,MAAM;AACd,UAAM,OAAO,aAAa,KAAK,IAAI;AACnC,QAAI,SAAS,UAAa,SAAS,KAAK;AACtC,aAAO,IAAI;AAAA,IACb;AAAA,EAEF,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,eAAW,GAAG;AAAA,EAChB,GAAG,CAAC,YAAY,GAAG,CAAC;AAEpB,SAAO;AAAA,IACL,WAAY,OAAa;AAAA,IACzB,SAAS,CAAC,SAAkB;AAC1B,UAAI;AAAe;AACnB,UAAI,YAAY,SAAS,QAAW;AAClC;AAAA,MACF;AACA,aAAO,CAAC,SAAS,aAAa,MAAM,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,IAAI,CAAC;AAAA,IACrF,CAAC;AAAA,EACH;AACF;AAEA,MAAM,eAAe,CAAC,MAAW,SAAc;AAC7C,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,MAAM,OAAO,MAAM;AAAC;",
   "names": []
 }

package/dist/jsx/useControllableState.js

@@ -1,5 +1,5 @@
 import { useEvent } from "@tamagui/use-event";
-import { useRef, useState } from "react";
+import { useEffect, useState } from "react";
 function useControllableState({
   prop,
   defaultProp,
@@ -7,37 +7,38 @@ function useControllableState({
   strategy = "prop-wins",
   preventUpdate
 }) {
-  const currentProp = useRef(prop);
   const [val, setVal] = useState(prop != null ? prop : defaultProp);
   const propWins = strategy === "prop-wins";
-  if (currentProp.current !== prop && !preventUpdate) {
-    currentProp.current = prop;
-    setVal((prev) => {
-      return getNextStateWithCallback(prev, prop, onChange);
-    });
-  }
+  const onChangeCb = useEvent(onChange || idFn);
+  useEffect(() => {
+    const next = getNextState(val, prop);
+    if (next !== void 0 && next !== val) {
+      setVal(next);
+    }
+  }, [prop]);
+  useEffect(() => {
+    onChangeCb(val);
+  }, [onChangeCb, val]);
   return [
-    val,
+    propWins ? prop : val,
     useEvent((next) => {
       if (preventUpdate)
         return;
-      if (propWins && currentProp.current !== void 0) {
-        onChange == null ? void 0 : onChange(next);
+      if (propWins && prop !== void 0) {
         return;
       }
-      setVal((prev) => {
-        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, onChange);
-      });
+      setVal((prev) => getNextState(prev, typeof next === "function" ? next(prev) : next));
     })
   ];
 }
-const getNextStateWithCallback = (prev, next, handleChange) => {
+const getNextState = (prev, next) => {
   if (prev === next || next === void 0) {
     return prev;
   }
-  handleChange == null ? void 0 : handleChange(next);
   return next;
 };
+const idFn = () => {
+};
 export {
   useControllableState
 };

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, { 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 currentProp = useRef(prop)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  // TODO can try no useEffect here right? just if()\n  if (currentProp.current !== prop && !preventUpdate) {\n    currentProp.current = prop\n    setVal((prev) => {\n      return getNextStateWithCallback(prev, prop, onChange)\n    })\n  }\n\n  return [\n    val,\n    useEvent((next: unknown) => {\n      if (preventUpdate) return\n      if (propWins && currentProp.current !== undefined) {\n        onChange?.(next as T)\n        return\n      }\n      setVal((prev) => {\n        return getNextStateWithCallback(\n          prev,\n          typeof next === 'function' ? next(prev) : next,\n          onChange\n        )\n      })\n    }),\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange?: ChangeCb<any>) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  handleChange?.(next)\n  return next\n}\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,IAAI;AAC/B,QAAM,CAAC,KAAK,UAAU,SAAS,sBAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAG9B,MAAI,YAAY,YAAY,QAAQ,CAAC,eAAe;AAClD,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS;AACf,aAAO,yBAAyB,MAAM,MAAM,QAAQ;AAAA,IACtD,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA,SAAS,CAAC,SAAkB;AAC1B,UAAI;AAAe;AACnB,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD,6CAAW;AACX;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,QACF;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEA,MAAM,2BAA2B,CAAC,MAAW,MAAW,iBAAiC;AACvF,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,+CAAe;AACf,SAAO;AACT;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\nimport React, { 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 [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n  const onChangeCb = useEvent(onChange || idFn)\n\n  // sync prop to state\n  useEffect(() => {\n    const next = getNextState(val, prop)\n    if (next !== undefined && next !== val) {\n      setVal(next)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [prop])\n\n  useEffect(() => {\n    onChangeCb(val)\n  }, [onChangeCb, val])\n\n  return [\n    propWins ? (prop as T) : val,\n    useEvent((next: unknown) => {\n      if (preventUpdate) return\n      if (propWins && prop !== undefined) {\n        return\n      }\n      setVal((prev) => getNextState(prev, typeof next === 'function' ? next(prev) : next))\n    }),\n  ]\n}\n\nconst getNextState = (prev: any, next: any) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  return next\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,KAAK,UAAU,SAAS,sBAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAC9B,QAAM,aAAa,SAAS,YAAY,IAAI;AAG5C,YAAU,MAAM;AACd,UAAM,OAAO,aAAa,KAAK,IAAI;AACnC,QAAI,SAAS,UAAa,SAAS,KAAK;AACtC,aAAO,IAAI;AAAA,IACb;AAAA,EAEF,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,eAAW,GAAG;AAAA,EAChB,GAAG,CAAC,YAAY,GAAG,CAAC;AAEpB,SAAO;AAAA,IACL,WAAY,OAAa;AAAA,IACzB,SAAS,CAAC,SAAkB;AAC1B,UAAI;AAAe;AACnB,UAAI,YAAY,SAAS,QAAW;AAClC;AAAA,MACF;AACA,aAAO,CAAC,SAAS,aAAa,MAAM,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,IAAI,CAAC;AAAA,IACrF,CAAC;AAAA,EACH;AACF;AAEA,MAAM,eAAe,CAAC,MAAW,SAAc;AAC7C,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,MAAM,OAAO,MAAM;AAAC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/use-controllable-state",
-  "version": "1.0.1-beta.119",
+  "version": "1.0.1-beta.122",
   "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.119"
+    "@tamagui/use-event": "^1.0.1-beta.122"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.119",
+    "@tamagui/build": "^1.0.1-beta.122",
     "react": "*",
     "react-dom": "*"
   },

package/src/useControllableState.ts

@@ -19,41 +19,40 @@ export function useControllableState<T>({
   strategy?: 'prop-wins' | 'most-recent-wins'
   preventUpdate?: boolean
 }): [T, React.Dispatch<React.SetStateAction<T>>] {
-  const currentProp = useRef(prop)
   const [val, setVal] = useState(prop ?? defaultProp)
   const propWins = strategy === 'prop-wins'
+  const onChangeCb = useEvent(onChange || idFn)
 
-  // TODO can try no useEffect here right? just if()
-  if (currentProp.current !== prop && !preventUpdate) {
-    currentProp.current = prop
-    setVal((prev) => {
-      return getNextStateWithCallback(prev, prop, onChange)
-    })
-  }
+  // sync prop to state
+  useEffect(() => {
+    const next = getNextState(val, prop)
+    if (next !== undefined && next !== val) {
+      setVal(next)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [prop])
+
+  useEffect(() => {
+    onChangeCb(val)
+  }, [onChangeCb, val])
 
   return [
-    val,
+    propWins ? (prop as T) : val,
     useEvent((next: unknown) => {
       if (preventUpdate) return
-      if (propWins && currentProp.current !== undefined) {
-        onChange?.(next as T)
+      if (propWins && prop !== undefined) {
         return
       }
-      setVal((prev) => {
-        return getNextStateWithCallback(
-          prev,
-          typeof next === 'function' ? next(prev) : next,
-          onChange
-        )
-      })
+      setVal((prev) => getNextState(prev, typeof next === 'function' ? next(prev) : next))
     }),
   ]
 }
 
-const getNextStateWithCallback = (prev: any, next: any, handleChange?: ChangeCb<any>) => {
+const getNextState = (prev: any, next: any) => {
   if (prev === next || next === undefined) {
     return prev
   }
-  handleChange?.(next)
   return next
 }
+
+const idFn = () => {}

package/types/useControllableState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../src/useControllableState.ts"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAK1D,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,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CA8B/C"}
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../src/useControllableState.ts"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAK1D,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,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CA4B/C"}