fix: reduce redundant updates for handlers and gestures

.changeset/fix-react-runtime-execid-churn.md

@@ -0,0 +1,9 @@
+---
+"@lynx-js/react": patch
+---
+
+fix: reduce redundant updates for main-thread handlers and gestures
+
+- Updates are faster when the main-thread event handler or gesture object is stable across rerenders (fewer unnecessary native updates).
+- Spread props rerenders that don't semantically change the handler/gesture no longer trigger redundant updates.
+- Removing a gesture from spread props reliably clears the gesture state on the target element.

packages/lynx/gesture-runtime/src/baseGesture.ts

@@ -255,7 +255,7 @@ abstract class BaseGesture<
     return removeUndefined(result);
   };
 
-  toJSON = (): Record<string, unknown> => {
+  toJSON = function(this: BaseGesture): Record<string, unknown> {
     return this.serialize();
   };
 

packages/lynx/gesture-runtime/src/composition.ts

@@ -107,7 +107,7 @@ class ComposedGesture implements GestureKind {
     };
   };
 
-  toJSON = (): Record<string, unknown> => {
+  toJSON = function(this: ComposedGesture): Record<string, unknown> {
     return this.serialize();
   };
 }

packages/react/runtime/__test__/snapshot/gesture.test.jsx

@@ -68,10 +68,12 @@ describe('Gesture', () => {
           },
         },
         __isGesture: true,
-        toJSON: () => ({
-          ...gesture,
-          __isSerialized: true,
-        }),
+        toJSON: function() {
+          return {
+            ...this,
+            __isSerialized: true,
+          };
+        },
       };
 
       return (
@@ -171,10 +173,12 @@ describe('Gesture', () => {
         simultaneousWith: [{ id: 2 }],
         continueWith: [{ id: 2 }],
         __isGesture: true,
-        toJSON: () => ({
-          ...panGesture,
-          __isSerialized: true,
-        }),
+        toJSON: function() {
+          return {
+            ...this,
+            __isSerialized: true,
+          };
+        },
       };
       const tapGesture = {
         id: 2,
@@ -186,20 +190,24 @@ describe('Gesture', () => {
         },
         __isGesture: true,
         waitFor: [{ id: 1 }],
-        toJSON: () => ({
-          ...tapGesture,
-          __isSerialized: true,
-        }),
+        toJSON: function() {
+          return {
+            ...this,
+            __isSerialized: true,
+          };
+        },
       };
 
       const gesture = {
         type: -1,
         __isGesture: true,
         gestures: [panGesture, tapGesture],
-        toJSON: () => ({
-          ...gesture,
-          __isSerialized: true,
-        }),
+        toJSON: function() {
+          return {
+            ...this,
+            __isSerialized: true,
+          };
+        },
       };
 
       return (
@@ -302,10 +310,9 @@ describe('Gesture', () => {
           },
         },
         __isGesture: true,
-        toJSON() {
-          const { toJSON, ...rest } = this;
+        toJSON: function() {
           return {
-            ...rest,
+            ...this,
             __isSerialized: true,
           };
         },
@@ -443,10 +450,9 @@ describe('Gesture', () => {
         },
       },
       __isGesture: true,
-      toJSON() {
-        const { toJSON, ...rest } = this;
+      toJSON: function() {
         return {
-          ...rest,
+          ...this,
           __isSerialized: true,
         };
       },
@@ -568,10 +574,12 @@ describe('Gesture', () => {
           minDistance: 100,
         },
         __isGesture: true,
-        toJSON: () => ({
-          ...gesture,
-          __isSerialized: true,
-        }),
+        toJSON: function() {
+          return {
+            ...this,
+            __isSerialized: true,
+          };
+        },
       };
 
       return (
@@ -676,10 +684,12 @@ describe('Gesture in spread', () => {
           },
         },
         __isGesture: true,
-        toJSON: () => ({
-          ...gesture,
-          __isSerialized: true,
-        }),
+        toJSON: function() {
+          return {
+            ...this,
+            __isSerialized: true,
+          };
+        },
       };
 
       const props = {
@@ -806,10 +816,9 @@ describe('Gesture in spread', () => {
         },
       },
       __isGesture: true,
-      toJSON() {
-        const { toJSON, ...rest } = this;
+      toJSON: function() {
         return {
-          ...rest,
+          ...this,
           __isSerialized: true,
         };
       },
@@ -915,10 +924,9 @@ describe('Gesture in spread', () => {
         },
       },
       __isGesture: true,
-      toJSON() {
-        const { toJSON, ...rest } = this;
+      toJSON: function() {
         return {
-          ...rest,
+          ...this,
           __isSerialized: true,
         };
       },
@@ -1041,10 +1049,9 @@ describe('Gesture in spread', () => {
         },
       },
       __isGesture: true,
-      toJSON() {
-        const { toJSON, ...rest } = this;
+      toJSON: function() {
         return {
-          ...rest,
+          ...this,
           __isSerialized: true,
         };
       },
@@ -1117,6 +1124,81 @@ describe('Gesture in spread', () => {
       expect(elementTree.__GetGestureDetectorIds(textElement).includes(1)).toBe(false);
     }
   });
+  it('keeps flatten when spread removes gesture but retains no-flatten attrs', async function() {
+    const spyRemoveGesture = vi.spyOn(globalThis, '__RemoveGestureDetector');
+    let _gesture = {
+      id: 1,
+      type: 0,
+      callbacks: {
+        onUpdate: {
+          _wkltId: 'bdd4:dd564:2',
+        },
+      },
+      __isGesture: true,
+      toJSON: function() {
+        return {
+          ...this,
+          __isSerialized: true,
+        };
+      },
+    };
+    let keepGesture = true;
+
+    function Comp() {
+      const props = keepGesture
+        ? {
+          'clip-radius': 8,
+          'main-thread:gesture': _gesture,
+        }
+        : {
+          'clip-radius': 8,
+        };
+      return (
+        <view>
+          <text {...props}>1</text>
+        </view>
+      );
+    }
+
+    {
+      __root.__jsx = <Comp />;
+      renderPage();
+    }
+
+    {
+      globalEnvManager.switchToBackground();
+      render(<Comp />, __root);
+    }
+
+    {
+      lynxCoreInject.tt.OnLifecycleEvent(...globalThis.__OnLifecycleEvent.mock.calls[0]);
+
+      globalEnvManager.switchToMainThread();
+      const rLynxChange = lynx.getNativeApp().callLepusMethod.mock.calls[0];
+      globalThis[rLynxChange[0]](rLynxChange[1]);
+    }
+
+    {
+      globalEnvManager.switchToBackground();
+      lynx.getNativeApp().callLepusMethod.mockClear();
+      spyRemoveGesture.mockClear();
+      keepGesture = false;
+
+      render(<Comp />, __root);
+
+      globalEnvManager.switchToMainThread();
+      const rLynxChange = lynx.getNativeApp().callLepusMethod.mock.calls[0];
+      globalThis[rLynxChange[0]](rLynxChange[1]);
+      const textElement = __root.__element_root.children[0].children[0];
+
+      expect(spyRemoveGesture).toHaveBeenCalledTimes(1);
+      expect(spyRemoveGesture).toHaveBeenCalledWith(textElement, 1);
+      expect(textElement.props['clip-radius']).toBe(8);
+      expect(textElement.props.flatten).toBe(false);
+      expect(textElement.props['has-react-gesture']).toBeUndefined();
+      expect(textElement.props.gesture).toBeUndefined();
+    }
+  });
   it('remove stale detector ids when gesture count shrinks on diff', async function() {
     const spySetGesture = vi.spyOn(globalThis, '__SetGestureDetector');
     const spyRemoveGesture = vi.spyOn(globalThis, '__RemoveGestureDetector');

packages/react/runtime/__test__/snapshot/gesture/prepareGestureForCommit.test.js

@@ -0,0 +1,86 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { prepareGestureForCommit } from '../../../src/snapshot/gesture/processGestureBagkround';
+import { clearConfigCacheForTesting } from '../../../src/snapshot/worklet/functionality';
+
+describe('prepareGestureForCommit', () => {
+  let previousSdkVersion;
+
+  beforeEach(() => {
+    previousSdkVersion = SystemInfo.lynxSdkVersion;
+    SystemInfo.lynxSdkVersion = '2.14';
+    clearConfigCacheForTesting();
+  });
+
+  afterEach(() => {
+    SystemInfo.lynxSdkVersion = previousSdkVersion;
+    clearConfigCacheForTesting();
+  });
+
+  it('does not mutate input gesture and supports non-object callbacks', () => {
+    const gesture = {
+      id: 1,
+      type: 0,
+      callbacks: {
+        onUpdate: null,
+      },
+      __isGesture: true,
+      toJSON() {
+        const { toJSON, ...rest } = this;
+        return {
+          ...rest,
+          __isSerialized: true,
+        };
+      },
+    };
+
+    const committed = prepareGestureForCommit(gesture);
+    expect(committed).not.toBe(gesture);
+    expect(committed.callbacks).not.toBe(gesture.callbacks);
+    expect(committed.callbacks.onUpdate).toBe(null);
+
+    expect(committed.toJSON).not.toBe(gesture.toJSON);
+
+    // Gesture runtime provides toJSON; ensure the committed object still serializes.
+    const json = committed.toJSON();
+    expect(json.__isSerialized).toBe(true);
+  });
+
+  it('serializes committed callbacks even when the source toJSON closes over the original gesture', () => {
+    const gesture = {
+      id: 1,
+      type: 0,
+      callbacks: {
+        onUpdate: {
+          _wkltId: 'bdd4:dd564:2',
+        },
+      },
+      waitFor: [],
+      simultaneousWith: [],
+      continueWith: [],
+      __isGesture: true,
+    };
+    gesture.toJSON = () => ({
+      id: gesture.id,
+      type: gesture.type,
+      callbacks: gesture.callbacks,
+      waitFor: [],
+      simultaneousWith: [],
+      continueWith: [],
+      __isSerialized: true,
+    });
+
+    const committed = prepareGestureForCommit(gesture);
+    const json = committed.toJSON();
+
+    expect(committed.callbacks.onUpdate).toEqual({
+      _wkltId: 'bdd4:dd564:2',
+    });
+    expect(committed.callbacks.onUpdate).not.toBe(gesture.callbacks.onUpdate);
+    expect(json.callbacks.onUpdate).toEqual({
+      _wkltId: 'bdd4:dd564:2',
+    });
+    expect(json.callbacks.onUpdate).not.toBe(gesture.callbacks.onUpdate);
+    expect(json.callbacks.onUpdate).toBe(committed.callbacks.onUpdate);
+  });
+});