Update hook usage in the NativeDetector (#3714)

## Description

1. Merges two `useEffects` with the same dependency array into one in
`useGesture`
2. Adds `useEffect` responsible for updating the `propsRef` in
`HostGestureDetector.web.tsx`
3. Removes `useEffects` which were only calling `detachHandlers` and
replaces them with a cleanup function in `HostGestureDetector.web.tsx`

---------

Co-authored-by: Andrzej Antoni Kwaśniewski <[email protected]>

Author: j-piasecki

packages/react-native-gesture-handler/src/v3/NativeDetector/HostGestureDetector.web.tsx

@@ -62,8 +62,8 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
   };
 
   useEffect(() => {
-    detachHandlers(attachedNativeHandlerTags.current);
-  }, [children]);
+    propsRef.current = props;
+  }, [props]);
 
   useEffect(() => {
     if (React.Children.count(children) !== 1) {
@@ -72,14 +72,13 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
       );
     }
 
-    attachHandlers(new Set(handlerTags));
-  }, [handlerTags, children]);
+    const newHandlerTags = new Set(handlerTags);
+    attachHandlers(newHandlerTags);
 
-  useEffect(() => {
     return () => {
-      detachHandlers(attachedHandlerTags.current);
+      detachHandlers(newHandlerTags);
     };
-  }, []);
+  }, [handlerTags, children]);
 
   return (
     <View style={{ display: 'contents' }} ref={viewRef as Ref<View>}>

packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts

@@ -94,21 +94,17 @@ export function useGesture<THandlerData, TConfig>(
   }, [type, tag]);
 
   useEffect(() => {
+    const preparedConfig = prepareConfig(config);
+    RNGestureHandlerModule.setGestureHandlerConfig(tag, preparedConfig);
+    RNGestureHandlerModule.flushOperations();
+
     bindSharedValues(config, tag);
 
     return () => {
       unbindSharedValues(config, tag);
     };
   }, [tag, config]);
 
-  useEffect(() => {
-    const preparedConfig = prepareConfig(config);
-
-    RNGestureHandlerModule.setGestureHandlerConfig(tag, preparedConfig);
-
-    RNGestureHandlerModule.flushOperations();
-  }, [config, tag]);
-
   return {
     tag,
     type,