[react-interactions] Press with useRef instead of useState (#16870)

We only need to read and modify the value for the lifetime of the hook

Author: necolas

packages/react-interactions/events/src/dom/Press.js

@@ -128,10 +128,10 @@ export function usePress(props: PressProps) {
     onPressStart,
   } = safeProps;
 
-  const [active, updateActive] = React.useState(null);
+  const activeResponder = React.useRef(null);
 
   const tap = useTap({
-    disabled: disabled || active === 'keyboard',
+    disabled: disabled || activeResponder.current === 'keyboard',
     preventDefault,
     onAuxiliaryTap(e) {
       if (onPressStart != null) {
@@ -147,56 +147,56 @@ export function usePress(props: PressProps) {
       }
     },
     onTapStart(e) {
-      if (active == null) {
-        updateActive('tap');
+      if (activeResponder.current == null) {
+        activeResponder.current = 'tap';
         if (onPressStart != null) {
           onPressStart(createGestureState(e, 'pressstart'));
         }
       }
     },
     onTapChange: onPressChange,
     onTapUpdate(e) {
-      if (active === 'tap') {
+      if (activeResponder.current === 'tap') {
         if (onPressMove != null) {
           onPressMove(createGestureState(e, 'pressmove'));
         }
       }
     },
     onTapEnd(e) {
-      if (active === 'tap') {
+      if (activeResponder.current === 'tap') {
         if (onPressEnd != null) {
           onPressEnd(createGestureState(e, 'pressend'));
         }
         if (onPress != null) {
           onPress(createGestureState(e, 'press'));
         }
-        updateActive(null);
+        activeResponder.current = null;
       }
     },
     onTapCancel(e) {
-      if (active === 'tap') {
+      if (activeResponder.current === 'tap') {
         if (onPressEnd != null) {
           onPressEnd(createGestureState(e, 'pressend'));
         }
-        updateActive(null);
+        activeResponder.current = null;
       }
     },
   });
 
   const keyboard = useKeyboard({
-    disabled: disabled || active === 'tap',
+    disabled: disabled || activeResponder.current === 'tap',
     onClick(e) {
       if (preventDefault !== false) {
         e.preventDefault();
       }
-      if (active == null && onPress != null) {
+      if (activeResponder.current == null && onPress != null) {
         onPress(createGestureState(e, 'press'));
       }
     },
     onKeyDown(e) {
-      if (active == null && isValidKey(e)) {
+      if (activeResponder.current == null && isValidKey(e)) {
         handlePreventDefault(preventDefault, e);
-        updateActive('keyboard');
+        activeResponder.current = 'keyboard';
 
         if (onPressStart != null) {
           onPressStart(createGestureState(e, 'pressstart'));
@@ -207,7 +207,7 @@ export function usePress(props: PressProps) {
       }
     },
     onKeyUp(e) {
-      if (active === 'keyboard' && isValidKey(e)) {
+      if (activeResponder.current === 'keyboard' && isValidKey(e)) {
         handlePreventDefault(preventDefault, e);
         if (onPressChange != null) {
           onPressChange(false);
@@ -218,7 +218,7 @@ export function usePress(props: PressProps) {
         if (onPress != null) {
           onPress(createGestureState(e, 'press'));
         }
-        updateActive(null);
+        activeResponder.current = null;
       }
     },
   });

packages/react-interactions/events/src/dom/testing-library/domEvents.js

@@ -104,7 +104,7 @@ function createPointerEvent(
     ctrlKey,
     detail,
     getModifierState(keyArg) {
-      createGetModifierState(keyArg, modifierState);
+      return createGetModifierState(keyArg, modifierState);
     },
     height: isMouse ? 1 : height != null ? height : defaultPointerSize,
     metaKey,
@@ -150,7 +150,7 @@ function createKeyboardEvent(
     altKey,
     ctrlKey,
     getModifierState(keyArg) {
-      createGetModifierState(keyArg, modifierState);
+      return createGetModifierState(keyArg, modifierState);
     },
     isComposing,
     key,
@@ -193,7 +193,7 @@ function createMouseEvent(
     ctrlKey,
     detail,
     getModifierState(keyArg) {
-      createGetModifierState(keyArg, modifierState);
+      return createGetModifierState(keyArg, modifierState);
     },
     metaKey,
     movementX,