perf(Autocomplete): Split context to reduce unnecessary re-renders#7337
perf(Autocomplete): Split context to reduce unnecessary re-renders#7337mattcosta7 merged 7 commits intomainfrom
Conversation
Split AutocompleteContext into separate contexts for static values, setters, and dynamic state. Components now subscribe only to the context slices they need, reducing re-renders. Part of #7312
🦋 Changeset detectedLatest commit: 4446722 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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
bot
added
the
integration-tests: recommended
|
👋 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 |
There was a problem hiding this comment.
Pull request overview
This PR optimizes Autocomplete component performance by splitting a monolithic context into three specialized contexts, reducing unnecessary re-renders during user typing. The changes prevent cascading re-renders where components were updating on every keystroke even when they didn't need the input value.
Key changes:
- Split
AutocompleteContextinto three contexts:AutocompleteContext(stable values),AutocompleteInputContext(keystroke values), andAutocompleteDeferredInputContext(deferred filtering) - Updated
AutocompleteInputandAutocompleteMenuto consume only the context slices they need - Implemented
useDeferredValuefor filtering operations to prevent blocking keystrokes
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
packages/react/src/Autocomplete/AutocompleteContext.tsx |
Defines three separate contexts replacing the original monolithic context |
packages/react/src/Autocomplete/Autocomplete.tsx |
Provides memoized values for all three contexts with proper dependency arrays |
packages/react/src/Autocomplete/AutocompleteInput.tsx |
Consumes AutocompleteContext and AutocompleteInputContext for immediate input needs |
packages/react/src/Autocomplete/AutocompleteMenu.tsx |
Consumes AutocompleteContext and AutocompleteDeferredInputContext for filtering without blocking keystrokes |
.changeset/perf-autocomplete-context-split.md |
Documents the performance optimization in the changelog |
|
Code changes LGTM! Is there any particular way you'd like me to test this before approving? |
I've mostly gone through the stories and validated they work as before Then i've gone through the performance/profilers and validated that re-renders are more scoped than before. I think this is a very low risk change since none of these contexts are public api. |
|
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/9487 |
Summary
Performance optimizations for Autocomplete to improve INP by reducing unnecessary re-renders.
Changes
Split AutocompleteContext into separate contexts:
Components now subscribe only to the context slices they need.
Expected INP Impact
Why this matters
When all context values are in a single context object, any change causes all consumers to re-render:
By splitting contexts, each component only re-renders when its specific data changes.
Part of the INP performance optimization effort. See #7312 for full context.