fix(web): skip unchanged shortcut modifier updates - 195x typing latency improvement (#13884)

Co-authored-by: GPT-6 Astra <noreply@openai.com>

Author: callmemorgan

apps/web/src/shortcutModifierState.test.ts

@@ -1,8 +1,13 @@
-import { describe, expect, it } from "vite-plus/test";
+// @vitest-environment jsdom
+
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
 
 import {
   areShortcutModifierStatesEqual,
   shortcutModifierStateAfterKeyboardEvent,
+  useShortcutModifierState,
   type ShortcutModifierState,
 } from "./shortcutModifierState";
 
@@ -13,6 +18,67 @@ const emptyState = (): ShortcutModifierState => ({
   shiftKey: false,
 });
 
+describe("useShortcutModifierState", () => {
+  let root: Root;
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.append(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it.each(["keyup", "paste", "blur"] as const)(
+    "does not render for unchanged modifiers after %s resets the state",
+    async (reset) => {
+      const render = vi.fn();
+      function Consumer() {
+        render(useShortcutModifierState());
+        return null;
+      }
+      await act(async () => {
+        root.render(createElement(Consumer));
+      });
+      const press = async (type: "keydown" | "keyup", key: string, shiftKey = false) => {
+        await act(async () => {
+          window.dispatchEvent(new KeyboardEvent(type, { key, shiftKey }));
+        });
+      };
+
+      await press("keydown", "Shift", true);
+      expect(render).toHaveBeenLastCalledWith({ ...emptyState(), shiftKey: true });
+      if (reset === "keyup") {
+        await press("keyup", "Shift");
+      } else {
+        await act(async () => {
+          window.dispatchEvent(new Event(reset));
+        });
+      }
+      expect(render).toHaveBeenLastCalledWith(emptyState());
+      render.mockClear();
+
+      for (const key of "typing") {
+        await press("keydown", key);
+        await press("keyup", key);
+      }
+      await act(async () => {
+        window.dispatchEvent(new Event("paste"));
+        window.dispatchEvent(new Event("blur"));
+      });
+      expect(render).not.toHaveBeenCalled();
+      await press("keydown", "Shift", true);
+      expect(render).toHaveBeenCalledExactlyOnceWith({ ...emptyState(), shiftKey: true });
+    },
+  );
+});
+
 function keyboardEventLike(type: "keydown" | "keyup", init: Partial<KeyboardEvent>): KeyboardEvent {
   return {
     type,

apps/web/src/shortcutModifierState.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export interface ShortcutModifierState {
   metaKey: boolean;
@@ -28,22 +28,26 @@ export function areShortcutModifierStatesEqual(
 
 export function useShortcutModifierState(): ShortcutModifierState {
   const [state, setState] = useState(EMPTY_SHORTCUT_MODIFIER_STATE);
+  const stateRef = useRef(EMPTY_SHORTCUT_MODIFIER_STATE);
 
   useEffect(() => {
+    const updateState = (next: ShortcutModifierState) => {
+      // Even a no-op state dispatch can cost work in the sidebar's large tree.
+      // Ordinary typing must return before dispatching a React update.
+      if (areShortcutModifierStatesEqual(stateRef.current, next)) return;
+      stateRef.current = next;
+      setState(next);
+    };
     const onKeyboardEvent = (event: KeyboardEvent) => {
-      setState((current) => shortcutModifierStateAfterKeyboardEvent(current, event));
+      updateState(shortcutModifierStateAfterKeyboardEvent(stateRef.current, event));
     };
     // Dictation tools (Wispr Flow) paste with a synthetic ⌘V whose Meta keyup
     // never reaches the page, so the tracked state stays "⌘ held" forever and
     // the thread jump hints stick on screen. A paste is never jump intent, so
     // treat it like a blur and reset. A physically held modifier re-registers
     // on the next real key event.
     const onResetEvent = () => {
-      setState((current) =>
-        areShortcutModifierStatesEqual(current, EMPTY_SHORTCUT_MODIFIER_STATE)
-          ? current
-          : EMPTY_SHORTCUT_MODIFIER_STATE,
-      );
+      updateState(EMPTY_SHORTCUT_MODIFIER_STATE);
     };
 
     window.addEventListener("keydown", onKeyboardEvent, true);