@trackunit/react-components 1.17.10 → 1.17.12

package/index.cjs.js

@@ -3335,27 +3335,33 @@ const useDebounce = (value, { onBounce, delay = 500 } = {}) => {
 const UNINITIALIZED = Symbol("UNINITIALIZED");
 /**
  * Hook to watch for changes in a value and react to them.
- * Uses deep equality comparison via es-toolkit's isEqual.
+ * Uses deep equality comparison via es-toolkit's isEqual by default.
  *
  * @param props - The hook properties
  * @param props.value - The value to watch for changes
  * @param props.onChange - Function to call when the value changes
  * @param props.immediate - Whether to run the callback immediately on mount (default: false)
  * @param props.skip - Whether to skip watching for changes (default: false)
+ * @param props.isEqual - Custom equality function to override the default deep comparison.
+ *   Useful when the watched value contains fields (e.g. function references) that are
+ *   new on every render but are not meaningful for change detection. (default: es-toolkit's isEqual)
  */
-const useWatch = ({ value, onChange, immediate = false, skip = false }) => {
+const useWatch = ({ value, onChange, immediate = false, skip = false, isEqual = esToolkit.isEqual, }) => {
     const prevValue = react.useRef(UNINITIALIZED);
     const onChangeRef = react.useRef(onChange);
-    // Update the ref whenever onChange changes
+    const isEqualRef = react.useRef(isEqual);
     react.useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
+    react.useEffect(() => {
+        isEqualRef.current = isEqual;
+    }, [isEqual]);
     react.useEffect(() => {
         if (skip) {
             return;
         }
         const prev = prevValue.current;
-        const hasChanged = prev === UNINITIALIZED ? false : !esToolkit.isEqual(value, prev);
+        const hasChanged = prev === UNINITIALIZED ? false : !isEqualRef.current(value, prev);
         if (immediate && prev === UNINITIALIZED) {
             onChangeRef.current(value, null);
         }

package/index.esm.js

@@ -3333,27 +3333,33 @@ const useDebounce = (value, { onBounce, delay = 500 } = {}) => {
 const UNINITIALIZED = Symbol("UNINITIALIZED");
 /**
  * Hook to watch for changes in a value and react to them.
- * Uses deep equality comparison via es-toolkit's isEqual.
+ * Uses deep equality comparison via es-toolkit's isEqual by default.
  *
  * @param props - The hook properties
  * @param props.value - The value to watch for changes
  * @param props.onChange - Function to call when the value changes
  * @param props.immediate - Whether to run the callback immediately on mount (default: false)
  * @param props.skip - Whether to skip watching for changes (default: false)
+ * @param props.isEqual - Custom equality function to override the default deep comparison.
+ *   Useful when the watched value contains fields (e.g. function references) that are
+ *   new on every render but are not meaningful for change detection. (default: es-toolkit's isEqual)
  */
-const useWatch = ({ value, onChange, immediate = false, skip = false }) => {
+const useWatch = ({ value, onChange, immediate = false, skip = false, isEqual: isEqual$1 = isEqual, }) => {
     const prevValue = useRef(UNINITIALIZED);
     const onChangeRef = useRef(onChange);
-    // Update the ref whenever onChange changes
+    const isEqualRef = useRef(isEqual$1);
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
+    useEffect(() => {
+        isEqualRef.current = isEqual$1;
+    }, [isEqual$1]);
     useEffect(() => {
         if (skip) {
             return;
         }
         const prev = prevValue.current;
-        const hasChanged = prev === UNINITIALIZED ? false : !isEqual(value, prev);
+        const hasChanged = prev === UNINITIALIZED ? false : !isEqualRef.current(value, prev);
         if (immediate && prev === UNINITIALIZED) {
             onChangeRef.current(value, null);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.17.10",
+  "version": "1.17.12",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.11.39",
-    "@trackunit/css-class-variance-utilities": "1.11.39",
-    "@trackunit/shared-utils": "1.13.39",
-    "@trackunit/ui-icons": "1.11.38",
+    "@trackunit/ui-design-tokens": "1.11.41",
+    "@trackunit/css-class-variance-utilities": "1.11.41",
+    "@trackunit/shared-utils": "1.13.41",
+    "@trackunit/ui-icons": "1.11.40",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

package/src/hooks/useWatch.d.ts

@@ -1,20 +1,24 @@
-interface UseWatchOptions {
+interface UseWatchOptions<TValue> {
     immediate?: boolean;
     skip?: boolean;
+    isEqual?: (a: TValue, b: TValue) => boolean;
 }
-interface UseWatchProps<TValue> extends UseWatchOptions {
+interface UseWatchProps<TValue> extends UseWatchOptions<TValue> {
     value: TValue;
     onChange: (value: TValue, prevValue: TValue | null) => void;
 }
 /**
  * Hook to watch for changes in a value and react to them.
- * Uses deep equality comparison via es-toolkit's isEqual.
+ * Uses deep equality comparison via es-toolkit's isEqual by default.
  *
  * @param props - The hook properties
  * @param props.value - The value to watch for changes
  * @param props.onChange - Function to call when the value changes
  * @param props.immediate - Whether to run the callback immediately on mount (default: false)
  * @param props.skip - Whether to skip watching for changes (default: false)
+ * @param props.isEqual - Custom equality function to override the default deep comparison.
+ *   Useful when the watched value contains fields (e.g. function references) that are
+ *   new on every render but are not meaningful for change detection. (default: es-toolkit's isEqual)
  */
-export declare const useWatch: <TValue>({ value, onChange, immediate, skip }: UseWatchProps<TValue>) => void;
+export declare const useWatch: <TValue>({ value, onChange, immediate, skip, isEqual, }: UseWatchProps<TValue>) => void;
 export {};