Simplify VirtualDetector/InterceptingGestureDetector and reduce the number of renders (#3813)

## Description

The communication logic between
`VirtualDetector`/`InterceptingGestureDetector` was complex, since it
was passing callbacks through ref and everything else through state via
context.

Since we're relying on Reanimated's `useEvent` and
`useComposedEventHandler`, we need to trigger a rerender anyway to
update the handler. This means there's no point in trying to optimize
passing callbacks via refs, as we need to end with a render, and
synchronizing renders and state updates requires additional logic.

This PR simplifies the communication layer to pass everything through
the state, which should greatly simplify logic.

It also:
- changes behavior of `shouldUseReanimated`, `dispatchesAnimatedEvents`
flags - now it checks every virtual gesture, where previously the last
registered one was the deciding factor
- explicitly disables auto-memoization for `VirtualDetector` so that
children changes can be detected - this should be changed to use
MutationObserver once it's rolled out in RN
- adds manual memoization to `InterceptingGestureDetector`

## Test plan

Tested on the following snippet:
```
import * as React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import {
  GestureDetector,
  InterceptingGestureDetector,
  useTap,
} from 'react-native-gesture-handler';

import { COLORS } from './colors';

function TextWithTap() {
  const tap = useTap({
    onStart: () => {
      'worklet';
      console.log('Tapped on text in its own component!');
    },
  });

  return (
    <GestureDetector gesture={tap}>
      <Text style={{ fontSize: 24, color: COLORS.KINDA_GREEN }}>
        This text is rendered in a separate component.
      </Text>
    </GestureDetector>
  );
}

function NativeDetectorExample() {
  const [entireVisible, setEntireVisible] = React.useState(true);
  const [firstVisible, setFirstVisible] = React.useState(true);
  const [secondVisible, setSecondVisible] = React.useState(true);
  const [thirdVisible, setThirdVisible] = React.useState(true);
  const [secondKey, setSecondKey] = React.useState(0);
  const [firstHasCallback, setFirstHasCallback] = React.useState(true);

  const tapAll = useTap({
    onStart: () => {
      'worklet';
      console.log('Tapped on text!');
    },
  });

  const tapFirstPart = useTap({
    onStart: firstHasCallback
      ? () => {
          'worklet';
          console.log('Tapped on first part!');
        }
      : () => {
          'worklet';
          console.log('First part tapped, but no callback set.');
        },
  });

  const tapSecondPart = useTap({
    onStart: () => {
      'worklet';
      console.log('Tapped on second part!');
    },
  });

  return (
    <View style={styles.subcontainer}>
      <Button
        title={(firstVisible ? 'Hide' : 'Show') + ' entire text'}
        onPress={() => setEntireVisible((v) => !v)}
      />
      <Button
        title={(firstVisible ? 'Hide' : 'Show') + ' first part'}
        onPress={() => setFirstVisible((v) => !v)}
      />
      <Button
        title={(secondVisible ? 'Hide' : 'Show') + ' second part'}
        onPress={() => setSecondVisible((v) => !v)}
      />
      <Button
        title={(thirdVisible ? 'Hide' : 'Show') + ' third part'}
        onPress={() => setThirdVisible((v) => !v)}
      />

      <Button
        title="Re-mount second part"
        onPress={() => setSecondKey((k) => k + 1)}
      />
      <Button
        title={
          (firstHasCallback ? 'Disable' : 'Enable') + ' callback on first text'
        }
        onPress={() => setFirstHasCallback((v) => !v)}
      />

      {entireVisible && (
        <InterceptingGestureDetector gesture={tapAll}>
          <Text style={{ fontSize: 18, textAlign: 'center' }}>
            Some text example running with RNGH
            {firstVisible && (
              <GestureDetector gesture={tapFirstPart}>
                <Text style={{ fontSize: 24, color: COLORS.NAVY }}>
                  {' '}
                  try tapping on this part
                </Text>
              </GestureDetector>
            )}
            {secondVisible && (
              <GestureDetector gesture={tapSecondPart}>
                <Text
                  key={secondKey}
                  style={{ fontSize: 28, color: COLORS.KINDA_BLUE }}>
                  {' '}
                  or on this part
                </Text>
              </GestureDetector>
            )}
            {thirdVisible && (
              <>
                {' '}
                <TextWithTap />
              </>
            )}{' '}
            this part is not special :(
          </Text>
        </InterceptingGestureDetector>
      )}
    </View>
  );
}

export default function NativeTextExample() {
  return (
    <View style={styles.container}>
      <NativeDetectorExample />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  subcontainer: {
    flex: 1,
    gap: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  header: {
    fontSize: 18,
    textAlign: 'center',
    paddingHorizontal: 24,
  },
});
```

Author: j-piasecki

packages/react-native-gesture-handler/apple/RNGestureHandlerDetector.mm

@@ -223,7 +223,7 @@ - (void)attachHandlers:(const std::vector<int> &)handlerTags
   }
 
   // This covers the case where `NativeViewGestureHandlers` are attached after child views were created.
-  if (self.subviews[0]) {
+  if (self.subviews.count != 0) {
     [self tryAttachNativeHandlersToChildView];
   }
 }

packages/react-native-gesture-handler/src/v3/detectors/GestureDetector.tsx

@@ -6,7 +6,7 @@ import {
   GestureDetectorProps as LegacyGestureDetectorProps,
   GestureDetector as LegacyGestureDetector,
 } from '../../handlers/gestures/GestureDetector';
-import { DetectorContext } from './VirtualDetector/useDetectorContext';
+import { InterceptingDetectorContext } from './VirtualDetector/useInterceptingDetectorContext';
 import { VirtualDetector } from './VirtualDetector/VirtualDetector';
 import { use } from 'react';
 import { isTestEnv } from '../../utils';
@@ -31,7 +31,7 @@ export function GestureDetector<THandlerData, TConfig>(
     return <LegacyGestureDetector {...(props as LegacyGestureDetectorProps)} />;
   }
 
-  const context = use(DetectorContext);
+  const context = use(InterceptingDetectorContext);
   return context ? (
     <VirtualDetector
       {...(props as NativeDetectorProps<THandlerData, TConfig>)}

packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx

@@ -1,11 +1,15 @@
-import React, { RefObject, useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import HostGestureDetector from '../HostGestureDetector';
 import {
-  VirtualChildren,
+  VirtualChild,
   GestureHandlerEvent,
   DetectorCallbacks,
 } from '../../types';
-import { DetectorContext } from './useDetectorContext';
+import {
+  InterceptingDetectorContext,
+  InterceptingDetectorContextValue,
+  InterceptingDetectorMode,
+} from './useInterceptingDetectorContext';
 import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
 import { configureRelations, ensureNativeDetectorComponent } from '../utils';
 import { isComposedGesture } from '../../hooks/utils/relationUtils';
@@ -17,64 +21,98 @@ import {
 } from '../common';
 import { tagMessage } from '../../../utils';
 
+interface VirtualChildrenForNative {
+  viewTag: number;
+  handlerTags: number[];
+  viewRef: unknown;
+}
+
 export function InterceptingGestureDetector<THandlerData, TConfig>({
   gesture,
   children,
 }: InterceptingGestureDetectorProps<THandlerData, TConfig>) {
-  const [virtualChildren, setVirtualChildren] = useState<VirtualChildren[]>([]);
-
-  const virtualMethods = useRef<
-    Map<number, RefObject<DetectorCallbacks<unknown>>>
-  >(new Map());
-
-  const [shouldUseReanimated, setShouldUseReanimated] = useState(
-    gesture ? gesture.config.shouldUseReanimatedDetector : false
+  const [virtualChildren, setVirtualChildren] = useState<Set<VirtualChild>>(
+    () => new Set()
   );
-  const [dispatchesAnimatedEvents, setDispatchesAnimatedEvents] = useState(
-    gesture ? gesture.config.dispatchesAnimatedEvents : false
+  const virtualChildrenForNativeComponent: VirtualChildrenForNative[] = useMemo(
+    () =>
+      Array.from(virtualChildren).map((child) => ({
+        viewTag: child.viewTag,
+        handlerTags: child.handlerTags,
+        viewRef: child.viewRef,
+      })),
+    [virtualChildren]
   );
+  const [mode, setMode] = useState<InterceptingDetectorMode>(
+    gesture?.config.shouldUseReanimatedDetector
+      ? InterceptingDetectorMode.REANIMATED
+      : gesture?.config.dispatchesAnimatedEvents
+        ? InterceptingDetectorMode.ANIMATED
+        : InterceptingDetectorMode.DEFAULT
+  );
+
+  const shouldUseReanimatedDetector =
+    mode === InterceptingDetectorMode.REANIMATED;
+  const dispatchesAnimatedEvents = mode === InterceptingDetectorMode.ANIMATED;
 
   const NativeDetectorComponent = dispatchesAnimatedEvents
     ? AnimatedNativeDetector
-    : shouldUseReanimated
+    : shouldUseReanimatedDetector
       ? ReanimatedNativeDetector
       : HostGestureDetector;
 
-  const register = useCallback(
-    (
-      child: VirtualChildren,
-      methods: RefObject<DetectorCallbacks<unknown>>,
-      forReanimated: boolean | undefined,
-      forAnimated: boolean | undefined
-    ) => {
-      setShouldUseReanimated(!!forReanimated);
-      setDispatchesAnimatedEvents(!!forAnimated);
-
-      setVirtualChildren((prev) => {
-        const index = prev.findIndex((c) => c.viewTag === child.viewTag);
-        if (index !== -1) {
-          const updated = [...prev];
-          updated[index] = child;
-          return updated;
-        }
+  const register = useCallback((child: VirtualChild) => {
+    setVirtualChildren((prev) => {
+      const newSet = new Set(prev);
+      newSet.add(child);
+      return newSet;
+    });
+  }, []);
 
-        return [...prev, child];
-      });
+  const unregister = useCallback((child: VirtualChild) => {
+    setVirtualChildren((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(child);
+      return newSet;
+    });
+  }, []);
 
-      child.handlerTags.forEach((tag) => {
-        virtualMethods.current.set(tag, methods);
-      });
-    },
-    []
-  );
+  const contextValue: InterceptingDetectorContextValue = useMemo(
+    () => ({
+      mode,
+      setMode: (newMode: InterceptingDetectorMode) => {
+        if (
+          (newMode === InterceptingDetectorMode.REANIMATED &&
+            mode === InterceptingDetectorMode.ANIMATED) ||
+          (newMode === InterceptingDetectorMode.ANIMATED &&
+            mode === InterceptingDetectorMode.REANIMATED)
+        ) {
+          throw new Error(
+            tagMessage(
+              'InterceptingGestureDetector can only handle either Reanimated or Animated events.'
+            )
+          );
+        }
 
-  const unregister = useCallback((childTag: number, handlerTags: number[]) => {
-    handlerTags.forEach((tag) => {
-      virtualMethods.current.delete(tag);
-    });
+        setMode(newMode);
+      },
+      register,
+      unregister,
+    }),
+    [mode, register, unregister]
+  );
 
-    setVirtualChildren((prev) => prev.filter((c) => c.viewTag !== childTag));
-  }, []);
+  useEffect(() => {
+    if (gesture?.config?.dispatchesAnimatedEvents) {
+      contextValue.setMode(InterceptingDetectorMode.ANIMATED);
+    } else if (gesture?.config?.shouldUseReanimatedDetector) {
+      contextValue.setMode(InterceptingDetectorMode.REANIMATED);
+    }
+  }, [
+    contextValue,
+    gesture?.config?.dispatchesAnimatedEvents,
+    gesture?.config?.shouldUseReanimatedDetector,
+  ]);
 
   // It might happen only with ReanimatedNativeDetector
   if (!NativeDetectorComponent) {
@@ -85,20 +123,23 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
     );
   }
 
-  const handleGestureEvent = (key: keyof DetectorCallbacks<THandlerData>) => {
-    return (e: GestureHandlerEvent<THandlerData>) => {
-      if (gesture?.detectorCallbacks[key]) {
-        gesture.detectorCallbacks[key](e);
-      }
-
-      virtualMethods.current.forEach((ref) => {
-        const method = ref.current?.[key];
-        if (method) {
-          method(e);
+  const createGestureEventHandler = useCallback(
+    (key: keyof DetectorCallbacks<THandlerData>) => {
+      return (e: GestureHandlerEvent<THandlerData>) => {
+        if (gesture?.detectorCallbacks[key]) {
+          gesture.detectorCallbacks[key](e);
         }
-      });
-    };
-  };
+
+        virtualChildren.forEach((child) => {
+          const method = child.methods[key];
+          if (method) {
+            method(e);
+          }
+        });
+      };
+    },
+    [gesture, virtualChildren]
+  );
 
   const getHandlers = useCallback(
     (key: keyof DetectorCallbacks<unknown>) => {
@@ -112,8 +153,8 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
         );
       }
 
-      virtualMethods.current.forEach((ref) => {
-        const handler = ref.current?.[key];
+      virtualChildren.forEach((child) => {
+        const handler = child.methods[key];
         if (handler) {
           handlers.push(
             handler as (e: GestureHandlerEvent<THandlerData>) => void
@@ -126,14 +167,28 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
     [virtualChildren, gesture?.detectorCallbacks]
   );
 
+  const reanimatedUpdateEvents = useMemo(
+    () => getHandlers('onReanimatedUpdateEvent'),
+    [getHandlers]
+  );
   const reanimatedEventHandler = Reanimated?.useComposedEventHandler(
-    getHandlers('onReanimatedUpdateEvent')
+    reanimatedUpdateEvents
+  );
+
+  const reanimatedStateChangeEvents = useMemo(
+    () => getHandlers('onReanimatedStateChange'),
+    [getHandlers]
   );
   const reanimatedStateChangeHandler = Reanimated?.useComposedEventHandler(
-    getHandlers('onReanimatedStateChange')
+    reanimatedStateChangeEvents
+  );
+
+  const reanimatedTouchEvents = useMemo(
+    () => getHandlers('onReanimatedTouchEvent'),
+    [getHandlers]
   );
   const reanimatedTouchEventHandler = Reanimated?.useComposedEventHandler(
-    getHandlers('onReanimatedTouchEvent')
+    reanimatedTouchEvents
   );
 
   ensureNativeDetectorComponent(NativeDetectorComponent);
@@ -142,47 +197,53 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
     configureRelations(gesture);
   }
 
+  const handlerTags = useMemo(() => {
+    if (gesture) {
+      return isComposedGesture(gesture) ? gesture.tags : [gesture.tag];
+    }
+    return [];
+  }, [gesture]);
+
   return (
-    <DetectorContext value={{ register, unregister }}>
+    <InterceptingDetectorContext value={contextValue}>
       <NativeDetectorComponent
         // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
-        onGestureHandlerStateChange={handleGestureEvent(
-          'onGestureHandlerStateChange'
+        onGestureHandlerStateChange={useMemo(
+          () => createGestureEventHandler('onGestureHandlerStateChange'),
+          [createGestureEventHandler]
         )}
         // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
-        onGestureHandlerEvent={handleGestureEvent('onGestureHandlerEvent')}
+        onGestureHandlerEvent={useMemo(
+          () => createGestureEventHandler('onGestureHandlerEvent'),
+          [createGestureEventHandler]
+        )}
         // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
         onGestureHandlerAnimatedEvent={
           gesture?.detectorCallbacks.onGestureHandlerAnimatedEvent
         }
         // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
-        onGestureHandlerTouchEvent={handleGestureEvent(
-          'onGestureHandlerTouchEvent'
+        onGestureHandlerTouchEvent={useMemo(
+          () => createGestureEventHandler('onGestureHandlerTouchEvent'),
+          [createGestureEventHandler]
         )}
         // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
         onGestureHandlerReanimatedStateChange={
-          shouldUseReanimated ? reanimatedStateChangeHandler : undefined
+          shouldUseReanimatedDetector ? reanimatedStateChangeHandler : undefined
         }
         // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
         onGestureHandlerReanimatedEvent={
-          shouldUseReanimated ? reanimatedEventHandler : undefined
+          shouldUseReanimatedDetector ? reanimatedEventHandler : undefined
         }
         // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
         onGestureHandlerReanimatedTouchEvent={
-          shouldUseReanimated ? reanimatedTouchEventHandler : undefined
-        }
-        handlerTags={
-          gesture
-            ? isComposedGesture(gesture)
-              ? gesture.tags
-              : [gesture.tag]
-            : []
+          shouldUseReanimatedDetector ? reanimatedTouchEventHandler : undefined
         }
+        handlerTags={handlerTags}
         style={nativeDetectorStyles.detector}
-        virtualChildren={virtualChildren}
+        virtualChildren={virtualChildrenForNativeComponent}
         moduleId={globalThis._RNGH_MODULE_ID}>
         {children}
       </NativeDetectorComponent>
-    </DetectorContext>
+    </InterceptingDetectorContext>
   );
 }