useSyncSharedValue

src/hooks/useSyncSharedValue.ts

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { useAnimatedReaction, runOnJS } from 'react-native-reanimated';
+import { deepEqualWorklet, shallowEqualWorklet } from '@/worklets/comparisons';
+
+type SetStateType<T, D> = D extends 'sharedToState' ? (value: T) => void : never;
+
+interface SyncParams<T, D extends 'sharedToState' | 'stateToShared'> {
+  sharedValue: { value: T };
+  state: T;
+  setState: SetStateType<T, D>;
+  syncDirection: D;
+  compareDepth?: 'shallow' | 'deep';
+}
+
+export function useSyncSharedValue<T, D extends 'sharedToState' | 'stateToShared'>({
+  sharedValue,
+  state,
+  setState,
+  syncDirection,
+  compareDepth = 'shallow',
+}: SyncParams<T, D>) {
+  useAnimatedReaction(
+    () => {
+      if (typeof sharedValue.value === 'object' && sharedValue.value !== null && typeof state === 'object' && state !== null) {
+        const isEqual =
+          compareDepth === 'deep'
+            ? deepEqualWorklet(sharedValue.value as Record<string, any>, state as Record<string, any>)
+            : shallowEqualWorklet(sharedValue.value as Record<string, any>, state as Record<string, any>);
+        return !isEqual;
+      }
+      return sharedValue.value !== state;
+    },
+    shouldSync => {
+      if (shouldSync) {
+        if (syncDirection === 'sharedToState') {
+          runOnJS(setState)(sharedValue.value);
+        } else {
+          sharedValue.value = state;
+        }
+      }
+    }
+  );
+}

src/worklets/comparisons.ts

@@ -0,0 +1,36 @@
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export function deepEqualWorklet(obj1: Record<string, any>, obj2: Record<string, any>): boolean {
+    'worklet';
+    if (Object.is(obj1, obj2)) {
+      return true;
+    }
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) {
+      return false;
+    }
+    for (const key of keys1) {
+      if (!(key in obj2) || !deepEqualWorklet(obj1[key], obj2[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  export function shallowEqualWorklet(obj1: Record<string, any>, obj2: Record<string, any>): boolean {
+    'worklet';
+    if (Object.is(obj1, obj2)) {
+      return true;
+    }
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) return false;
+    for (const key of keys1) {
+      if (obj1[key] !== obj2[key]) {
+        return false;
+      }
+    }
+    return true;
+  }
+