perf: memoize context values in use*ContextValues hooks#36008
Merged
layershifter merged 4 commits intomicrosoft:masterfrom Apr 23, 2026
Merged
perf: memoize context values in use*ContextValues hooks#36008layershifter merged 4 commits intomicrosoft:masterfrom
layershifter merged 4 commits intomicrosoft:masterfrom
Conversation
Wraps context value objects in `React.useMemo` across react-context-selector consumer packages so Provider value identity stays stable across renders when dependencies are unchanged, preventing unnecessary consumer re-renders. Also extracts `use*ContextValues` hooks that were co-located with context creation into dedicated files under their component folders (color-picker, swatch-picker, carousel-slider, carousel-nav), and introduces a new `usePopoverContextValues_unstable` hook to replace the inline Provider object that was built directly in `renderPopover_unstable`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
layershifter
requested review from
a team,
Mitch-At-Work,
ValentinaKozlova,
chpalac and
dmytrokirpa
as code owners
layershifter
force-pushed
the
refactor/memoize-context-values
branch
from
fb701b2 to
dd34c62
Compare
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
bsunderhus
approved these changes
Apr 21, 2026
dmytrokirpa
approved these changes
Apr 21, 2026
layershifter
force-pushed
the
refactor/memoize-context-values
branch
from
d9c6d11 to
ce3566a
Compare
miroslavstastny
approved these changes
Apr 22, 2026
Mitch-At-Work
approved these changes
Apr 22, 2026
Contributor
Mitch-At-Work
left a comment
Mitch-At-Work
left a comment
There was a problem hiding this comment.
TeachingPopover and Carousel looking good after changes (E2E covered in another PR)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
React.useMemoacross all@fluentui/react-context-selectorconsumer packages so Provider value identity stays stable across renders, preventing unnecessary consumer re-renders.use*ContextValueshooks that were co-located with context creation (contexts/colorPicker.ts,contexts/swatchPicker.ts,CarouselSlider/CarouselSliderContext.ts,CarouselNav/CarouselNavContext.ts) into dedicated files under their component folders, matching the convention already used elsewhere.usePopoverContextValues_unstable+PopoverContextValuesfor@fluentui/react-popoverto replace the inline<PopoverContext.Provider value={{...}}>that was built directly inrenderPopover_unstable.renderPopover_unstablenow accepts an optionalcontextValuesand falls back to the newly exportedpopoverContextDefaultValue.Notes
renderPopover_unstablegains an optionalcontextValuesparameter; the change cascades torenderTeachingPopover_unstablewhich re-uses it. Both remain backward compatible via the default-value fallback.useSwatchPickerContextValuesis publicly exported; its import surface is preserved via re-export fromcontexts/index.ts.react-dialog/DialogSurfacewas intentionally skipped (returns a primitivetrue).react-migration-v0-v9/Listwas intentionally skipped.🤖 Generated with Claude Code