diff --git a/.changeset/eight-hats-laugh.md b/.changeset/eight-hats-laugh.md new file mode 100644 index 00000000000..3b4de093348 --- /dev/null +++ b/.changeset/eight-hats-laugh.md @@ -0,0 +1,7 @@ +--- +'@primer/react': patch +--- + +perf(TreeView): Optimize typeahead with startTransition to prevent input lag + +Wrapped the expensive typeahead search operation in `startTransition` to mark it as low-priority, keeping keystroke handling responsive while deferring the focus search. This improves performance on large trees with thousands of items. diff --git a/packages/react/src/TreeView/useTypeahead.ts b/packages/react/src/TreeView/useTypeahead.ts index 128b6f967eb..8c3eb97f18c 100644 --- a/packages/react/src/TreeView/useTypeahead.ts +++ b/packages/react/src/TreeView/useTypeahead.ts @@ -1,4 +1,4 @@ -import React from 'react' +import React, {startTransition} from 'react' import useSafeTimeout from '../hooks/useSafeTimeout' import {getAccessibleName} from './shared' import {useTreeItemCache} from './useTreeItemCache' @@ -71,7 +71,10 @@ export function useTypeahead({containerRef, onFocusChange}: TypeaheadOptions) { // Update the existing search value with the new key press searchValue.current += event.key - focusSearchValue(searchValue.current) + // Defer the expensive search operation to avoid blocking user input + startTransition(() => { + focusSearchValue(searchValue.current) + }) // Reset the timeout safeClearTimeout(timeoutRef.current)