perf(SelectPanel): memoize overlay props and callbacks by hectahertz · Pull Request #7621 · primer/react

hectahertz · 2026-03-04T12:31:50Z

Closes #

SelectPanel was creating several new object/function references on every render that got passed as props to AnchoredOverlay:

overlayProps: complex nested object with style, role, aria attributes, created inline every render
focusTrapSettings: new object every render
preventBubbling: curried function creating a new closure every render
closeButtonProps: inline object literal every render

Memoized all of these. Also refactored preventBubbling from a curried function to a direct useCallback, passing the overlay's onKeyDown through the dependency array instead of the closure.

Changelog

New

N/A

Changed

Memoized overlayProps, focusTrapSettings, and preventBubbling to stabilize references across renders
Hoisted closeButtonProps to a module-level constant

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

Pure memoization refactor, no behavioral changes. The preventBubbling function was refactored from curried to direct callback, but the logic is identical.

Merge checklist

changeset-bot · 2026-03-04T12:31:55Z

🦋 Changeset detected

Latest commit: d66524d

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 · 2026-03-04T12:33:56Z

⚠️ Action required

👋 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 refactors SelectPanel to reduce unnecessary allocations by memoizing several props/callbacks passed into AnchoredOverlay, helping stabilize references across renders.

Changes:

Memoizes focusTrapSettings and consolidated overlayProps into a mergedOverlayProps useMemo.
Refactors preventBubbling from a curried function to a direct useCallback.
Hoists closeButtonProps to a module-level constant and adds a patch changeset.

Reviewed changes

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

File	Description
packages/react/src/SelectPanel/SelectPanel.tsx	Memoizes overlay-related props/callbacks to reduce re-renders/allocations when passing props to `AnchoredOverlay`.
.changeset/perf-select-panel-memo-context.md	Adds a patch changeset describing the perf-focused memoization refactor.

Comments suppressed due to low confidence (1)

packages/react/src/SelectPanel/SelectPanel.tsx:803

The double cast in overlayProps?.onKeyDown?.(event as unknown as React.KeyboardEvent<HTMLDivElement>) looks unnecessary because event is already a React.KeyboardEvent<HTMLDivElement>. If there’s a typing mismatch, it would be clearer to type/narrow overlayProps.onKeyDown (or the extracted overlayOnKeyDown) rather than casting the event to unknown.

    (event: React.KeyboardEvent<HTMLDivElement>) => {
      overlayProps?.onKeyDown?.(event as unknown as React.KeyboardEvent<HTMLDivElement>)

Copilot · 2026-03-04T12:35:16Z

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -817,7 +816,35 @@ function Panel({

      // if this is a typeahead event, don't propagate outside of menu
      event.stopPropagation()
-    }
+    },
+    [overlayProps],
+  )


preventBubbling closes over the entire overlayProps object and lists it in the dependency array. Since only overlayProps.onKeyDown is used, this will recreate the callback whenever any other overlay prop changes (defeating the memoization goal). Consider extracting const overlayOnKeyDown = overlayProps?.onKeyDown and depending on that instead (and call that inside the handler).

This issue also appears on line 801 of the same file.

Copilot · 2026-03-04T12:35:17Z

packages/react/src/SelectPanel/SelectPanel.tsx

+      } as React.CSSProperties,
+      onKeyDown: preventBubbling,
+    }),
+    [titleId, subtitle, subtitleId, overlayProps, variant, isKeyboardVisible, availablePanelHeight, preventBubbling],


mergedOverlayProps only uses subtitle for a truthiness check to decide whether to set aria-describedby. Depending on the full subtitle value can cause recomputation when callers pass a new ReactElement each render even though the boolean presence hasn’t changed. Consider using Boolean(subtitle) (or subtitle != null) in the deps instead of subtitle to keep the memo effective.

Suggested change

[titleId, subtitle, subtitleId, overlayProps, variant, isKeyboardVisible, availablePanelHeight, preventBubbling],

[titleId, Boolean(subtitle), subtitleId, overlayProps, variant, isKeyboardVisible, availablePanelHeight, preventBubbling],

jonrohan

Seems good, would be worth checking out integration tests also

…ntBubbling

primer-integration · 2026-03-13T01:32:13Z

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

primer-integration · 2026-03-13T01:39:23Z

Integration test results from github/github-ui:

CI Passed
VRT Passed
Projects Passed

All checks passed!

hectahertz requested a review from a team as a code owner March 4, 2026 12:31

hectahertz requested review from Copilot and jonrohan March 4, 2026 12:31

Copilot started reviewing on behalf of hectahertz March 4, 2026 12:32 View session

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Mar 4, 2026

Copilot AI reviewed Mar 4, 2026

View reviewed changes

hectahertz deployed to github-pages March 4, 2026 12:42 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7621 March 4, 2026 12:42 Inactive

jonrohan approved these changes Mar 5, 2026

View reviewed changes

hectahertz force-pushed the hectahertz/perf-select-panel-memo-context branch from 82bab6d to bd74d49 Compare March 9, 2026 16:10

hectahertz deployed to github-pages March 9, 2026 16:23 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7621 March 9, 2026 16:23 Inactive

hectahertz added 2 commits March 11, 2026 08:19

perf(SelectPanel): memoize overlayProps, focusTrapSettings, and preve…

7de0e7a

…ntBubbling

chore: changeset

43c0462

hectahertz force-pushed the hectahertz/perf-select-panel-memo-context branch from bd74d49 to 43c0462 Compare March 11, 2026 07:19

hectahertz deployed to github-pages March 11, 2026 07:30 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7621 March 11, 2026 07:30 Inactive

hectahertz enabled auto-merge March 11, 2026 16:26

Merge branch 'main' into hectahertz/perf-select-panel-memo-context

d66524d

primer bot deployed to github-pages March 12, 2026 16:58 View deployment

github-actions bot deployed to storybook-preview-7621 March 12, 2026 16:58 View deployment

hectahertz added the integration-tests: skipped manually Changes in this PR do not require an integration test label Mar 12, 2026

hectahertz added this pull request to the merge queue Mar 12, 2026

Merged via the queue into main with commit 235126a Mar 12, 2026
57 checks passed

hectahertz deleted the hectahertz/perf-select-panel-memo-context branch March 12, 2026 18:04

primer bot mentioned this pull request Mar 12, 2026

Release tracking #7653

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

perf(SelectPanel): memoize overlay props and callbacks#7621

perf(SelectPanel): memoize overlay props and callbacks#7621
hectahertz merged 3 commits intomainfrom
hectahertz/perf-select-panel-memo-context

hectahertz commented Mar 4, 2026

Uh oh!

changeset-bot bot commented Mar 4, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 4, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

jonrohan left a comment

Uh oh!

Uh oh!

primer-integration bot commented Mar 13, 2026

Uh oh!

primer-integration bot commented Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	[titleId, subtitle, subtitleId, overlayProps, variant, isKeyboardVisible, availablePanelHeight, preventBubbling],
	[titleId, Boolean(subtitle), subtitleId, overlayProps, variant, isKeyboardVisible, availablePanelHeight, preventBubbling],

Conversation

hectahertz commented Mar 4, 2026

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Mar 4, 2026

⚠️ Action required

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

jonrohan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

primer-integration bot commented Mar 13, 2026

Uh oh!

primer-integration bot commented Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Mar 4, 2026 •

edited

Loading