perf: avoid calling executeOnUIRuntimeSync if shared value has initial value

Author: janicduplessis

packages/react-native-reanimated/src/mutables.ts

@@ -2,6 +2,7 @@
 import {
   executeOnUIRuntimeSync,
   makeShareableCloneRecursive,
+  runOnJS,
   runOnUI,
   shareableMappingCache,
 } from 'react-native-worklets';
@@ -94,10 +95,14 @@ function hideInternalValueProp<Value>(mutable: PartialMutable<Value>) {
   });
 }
 
-export function makeMutableUI<Value>(initial: Value): Mutable<Value> {
+export function makeMutableUI<Value>(
+  initial: Value,
+  setIsDirty?: () => void
+): Mutable<Value> {
   'worklet';
   const listeners = new Map<number, Listener<Value>>();
   let value = initial;
+  let isDirty = false;
 
   const mutable: PartialMutable<Value> = {
     get value() {
@@ -114,6 +119,10 @@ export function makeMutableUI<Value>(initial: Value): Mutable<Value> {
       listeners.forEach((listener) => {
         listener(newValue);
       });
+      if (setIsDirty && !isDirty && value !== initial) {
+        isDirty = true;
+        runOnJS(setIsDirty)();
+      }
     },
     modify: (modifier, forceUpdate = true) => {
       valueSetter(
@@ -140,23 +149,33 @@ export function makeMutableUI<Value>(initial: Value): Mutable<Value> {
 }
 
 function makeMutableNative<Value>(initial: Value): Mutable<Value> {
+  let isDirty = false;
+  const setIsDirty = () => {
+    isDirty = true;
+  };
+
   const handle = makeShareableCloneRecursive({
     __init: () => {
       'worklet';
-      return makeMutableUI(initial);
+      return makeMutableUI(initial, setIsDirty);
     },
   });
 
   const mutable: PartialMutable<Value> = {
     get value(): Value {
       checkInvalidReadDuringRender();
-      const uiValueGetter = executeOnUIRuntimeSync((sv: Mutable<Value>) => {
-        return sv.value;
-      });
-      return uiValueGetter(mutable as Mutable<Value>);
+      if (isDirty) {
+        const uiValueGetter = executeOnUIRuntimeSync((sv: Mutable<Value>) => {
+          return sv.value;
+        });
+        return uiValueGetter(mutable as Mutable<Value>);
+      } else {
+        return initial;
+      }
     },
     set value(newValue) {
       checkInvalidWriteDuringRender();
+      isDirty = true;
       runOnUI(() => {
         mutable.value = newValue;
       })();