perf(TreeView): defer scrollIntoView to coalesce reflows during rapid navigation

[hectahertz]

Closes #

Defers scrollIntoView calls in TreeView's onFocus handler using requestAnimationFrame, so rapid keyboard navigation (held arrow key) coalesces multiple scroll requests into a single reflow per frame instead of one per keystroke.

Previously, every focus change called scrollIntoView synchronously, forcing the browser to compute layout for the entire DOM. With large trees (26K items, 289K DOM nodes), this cost ~3.7ms per call, adding up to 164ms of blocked main thread time across 50 rapid keypresses.

Each onFocus now schedules a scroll via rAF. If a new focus event fires before the frame callback runs, the previous one is cancelled. Only the final focused element's scroll actually executes. Exposed to Item components through RootContext.

This preserves the existing behavior for single-focus scenarios (tab into tree, click, single arrow press). The scroll still happens, just one frame later.

Benchmarks (26,000 items, 289K DOM nodes)

scrollIntoView cost per call:

Approach	Avg	Max
Sync (old)	3.72ms	4.80ms
rAF schedule (new)	0.01ms	0.10ms

50 rapid focus changes (held key simulation):

Metric	Sync (old)	rAF coalesced (new)
✨ Total time ✨	164ms	0.1ms
Per-call cost	3.28ms	0.002ms
Actual scrollIntoView calls	50	1 (deferred)
Reflows forced	50	1

Changelog

New

N/A

Changed

• scrollIntoView in TreeView item onFocus is now deferred via requestAnimationFrame, coalescing multiple scroll requests during rapid keyboard navigation into a single reflow per frame

Removed

N/A

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

• All 51 existing TreeView tests pass unchanged
• To manually verify: open the StressTest story, expand several directories, and hold ArrowDown. Focus should scroll smoothly without jank.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github

[changeset-bot]

🦋 Changeset detected

Latest commit: 8ed9ae7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull request overview

This PR improves TreeView keyboard-navigation performance by deferring scrollIntoView work to requestAnimationFrame, so multiple rapid focus changes coalesce into a single scroll/reflow per frame.

Changes:

• Added a scrollElementIntoView helper on RootContext that schedules (and cancels) scrollIntoView via requestAnimationFrame.
• Updated TreeView item onFocus handling to use the deferred scroll helper instead of calling scrollIntoView synchronously.
• Added a patch changeset documenting the perf change.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/react/src/TreeView/TreeView.tsx	Defers and coalesces focus-driven scrolling via rAF and exposes the helper through RootContext.
.changeset/treeview-defer-scroll.md	Adds a patch changeset entry describing the TreeView perf improvement.

[hectahertz]

Friendly ping for review: @jonrohan@siddharthkp@TylerJDev 🙏

[jonrohan]

Seems ok to me, but don't feel like I know a ton about react animation frames.

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/15933

[primer-integration]

Integration test results from github/github-ui:

CI Passed
VRT Waiting
Projects Passed