Skip to content

perf(Dialog): use stable context value reference#7620

Open
hectahertz wants to merge 4 commits intomainfrom
hectahertz/perf-dialog-stable-context
Open

perf(Dialog): use stable context value reference#7620
hectahertz wants to merge 4 commits intomainfrom
hectahertz/perf-dialog-stable-context

Conversation

@hectahertz
Copy link
Contributor

Closes #

DialogContext.Provider was receiving value={{}} which creates a new object reference on every render. Since this context is only used as a presence check (useContext(DialogContext) !== undefined), a module-level constant works perfectly.

Changelog

New

N/A

Changed

  • Hoisted DialogContext value to a module-level constant to avoid new object allocation on every render

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

Trivial change, no behavioral difference. The context value is only used as a presence check.

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-ui

@hectahertz hectahertz requested a review from a team as a code owner March 4, 2026 12:29
@changeset-bot
Copy link

changeset-bot bot commented Mar 4, 2026

🦋 Changeset detected

Latest commit: daee366

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
Copy link
Contributor

github-actions bot commented Mar 4, 2026

⚠️ 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.

@github-actions 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
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR optimizes @primer/react’s Dialog by avoiding a new DialogContext.Provider value object allocation on every render, since the context is used only as a presence sentinel.

Changes:

  • Hoists the DialogContext provider value into a module-level constant for a stable reference.
  • Adds a patch changeset documenting the performance optimization.

Reviewed changes

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

File Description
packages/react/src/Dialog/Dialog.tsx Uses a module-level constant for DialogContext.Provider value instead of an inline {} per render.
.changeset/perf-dialog-stable-context.md Patch changeset describing the stable context value optimization.


// useful to determine whether we're inside a Dialog from a nested component
export const DialogContext = React.createContext<object | undefined>(undefined)
const DIALOG_CONTEXT_VALUE = {}
Copy link

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DIALOG_CONTEXT_VALUE is a shared mutable object across all Dialog instances. If any consumer ever mutates the context value (even accidentally), that mutation will persist across renders and leak between dialogs. To keep the “presence check only” invariant and avoid mutation-related footguns, use an immutable sentinel (e.g. Object.freeze({}) as done in deprecated/utils/create-slots.tsx).

Suggested change
const DIALOG_CONTEXT_VALUE = {}
const DIALOG_CONTEXT_VALUE = Object.freeze({})

Copilot uses AI. Check for mistakes.
Comment on lines +1 to +5
---
'@primer/react': patch
---

Use stable object reference for DialogContext value to prevent unnecessary re-renders
Copy link

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR metadata indicates tests were “Added/updated”, but this PR only changes the Dialog context value and adds a changeset (no test updates). Please either update the checklist/description to reflect reality, or add coverage that would fail if the context value regressed to an unstable reference.

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants