Updated to use single hook selector #27491

GeoffCoxMSFT · 2023-04-07T20:43:00Z

Problem

The large number of no-op implementation for the default value of the custom hooks is preventing bundling minification.

This is an alternative approach to #27404

Changes

removed the useCustomStyleHooks that returns every hook
added useCustomStyleHook that returns a single hook
updated to have default be an empty object
updated context type to be a partial
updated shallow merge to handle partial
updated every call to useCustomStyleHooks with useCustomStyleHook('hookname')

Issues

Fixes #27139

fabricteam · 2023-04-07T20:50:31Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`88.891 kB` `26.6 kB`	`86.172 kB` `26.143 kB`	`-2.719 kB` `-457 B`
`react-alert` Alert	`95.74 kB` `23.13 kB`	`93.032 kB` `22.65 kB`	`-2.708 kB` `-480 B`
`react-avatar` Avatar	`59.494 kB` `15.587 kB`	`56.797 kB` `15.118 kB`	`-2.697 kB` `-469 B`
`react-avatar` AvatarGroup	`18.223 kB` `6.7 kB`	`15.632 kB` `6.258 kB`	`-2.591 kB` `-442 B`
`react-avatar` AvatarGroupItem	`75.719 kB` `20.079 kB`	`73.011 kB` `19.616 kB`	`-2.708 kB` `-463 B`
`react-badge` Badge	`26.099 kB` `7.632 kB`	`23.512 kB` `7.197 kB`	`-2.587 kB` `-435 B`
`react-badge` CounterBadge	`27.084 kB` `7.943 kB`	`24.416 kB` `7.506 kB`	`-2.668 kB` `-437 B`
`react-badge` PresenceBadge	`34.573 kB` `8.739 kB`	`31.904 kB` `8.296 kB`	`-2.669 kB` `-443 B`
`react-button` Button	`39.864 kB` `9.996 kB`	`37.179 kB` `9.534 kB`	`-2.685 kB` `-462 B`
`react-button` CompoundButton	`47.012 kB` `11.471 kB`	`44.328 kB` `11.016 kB`	`-2.684 kB` `-455 B`
`react-button` MenuButton	`44.55 kB` `11.357 kB`	`41.866 kB` `10.861 kB`	`-2.684 kB` `-496 B`
`react-button` SplitButton	`52.961 kB` `12.932 kB`	`50.254 kB` `12.441 kB`	`-2.707 kB` `-491 B`
`react-button` ToggleButton	`58.243 kB` `11.927 kB`	`55.559 kB` `11.479 kB`	`-2.684 kB` `-448 B`
`react-checkbox` Checkbox	`37.083 kB` `11.285 kB`	`34.379 kB` `10.833 kB`	`-2.704 kB` `-452 B`
`react-combobox` Combobox (including child components)	`89.775 kB` `28.537 kB`	`87.056 kB` `28.011 kB`	`-2.719 kB` `-526 B`
`react-combobox` Dropdown (including child components)	`88.459 kB` `28.262 kB`	`85.74 kB` `27.747 kB`	`-2.719 kB` `-515 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`67.986 kB` `18.429 kB`	`65.31 kB` `17.931 kB`	`-2.676 kB` `-498 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`207.27 kB` `57.634 kB`	`204.5 kB` `57.183 kB`	`-2.77 kB` `-451 B`
`react-components` react-components: FluentProvider & webLightTheme	`38.773 kB` `12.375 kB`	`36.086 kB` `11.9 kB`	`-2.687 kB` `-475 B`
`react-datepicker-compat` DatePicker Compat	`223.13 kB` `58.944 kB`	`220.457 kB` `58.521 kB`	`-2.673 kB` `-423 B`
`react-dialog` Dialog (including children components)	`93.747 kB` `27.527 kB`	`91.028 kB` `27.083 kB`	`-2.719 kB` `-444 B`
`react-divider` Divider	`20.072 kB` `6.742 kB`	`17.399 kB` `6.298 kB`	`-2.673 kB` `-444 B`
`react-field` Field	`21.537 kB` `7.454 kB`	`18.864 kB` `7.004 kB`	`-2.673 kB` `-450 B`
`react-image` Image	`14.067 kB` `5.012 kB`	`11.479 kB` `4.573 kB`	`-2.588 kB` `-439 B`
`react-infobutton` InfoButton	`130.761 kB` `39.509 kB`	`128.088 kB` `39.045 kB`	`-2.673 kB` `-464 B`
`react-infobutton` InfoLabel	`133.987 kB` `40.517 kB`	`131.371 kB` `40.039 kB`	`-2.616 kB` `-478 B`
`react-input` Input	`26.806 kB` `8.151 kB`	`24.133 kB` `7.723 kB`	`-2.673 kB` `-428 B`
`react-label` Label	`12.693 kB` `4.626 kB`	`10.104 kB` `4.185 kB`	`-2.589 kB` `-441 B`
`react-menu` Menu (including children components)	`131.068 kB` `39.705 kB`	`128.361 kB` `39.234 kB`	`-2.707 kB` `-471 B`
`react-menu` Menu (including selectable components)	`134.074 kB` `40.243 kB`	`131.345 kB` `39.749 kB`	`-2.729 kB` `-494 B`
`react-persona` Persona	`66.426 kB` `17.533 kB`	`63.718 kB` `17.048 kB`	`-2.708 kB` `-485 B`
`react-popover` Popover	`117.744 kB` `35.886 kB`	`115.071 kB` `35.448 kB`	`-2.673 kB` `-438 B`
`react-progress` ProgressBar	`16.445 kB` `5.865 kB`	`13.856 kB` `5.434 kB`	`-2.589 kB` `-431 B`
`react-provider` FluentProvider	`20.72 kB` `7.14 kB`	`18.033 kB` `6.666 kB`	`-2.687 kB` `-474 B`
`react-radio` Radio	`29.897 kB` `9.112 kB`	`27.282 kB` `8.661 kB`	`-2.615 kB` `-451 B`
`react-radio` RadioGroup	`13.984 kB` `5.154 kB`	`11.312 kB` `4.71 kB`	`-2.672 kB` `-444 B`
`react-select` Select	`28.03 kB` `9.235 kB`	`25.357 kB` `8.798 kB`	`-2.673 kB` `-437 B`
`react-slider` Slider	`36.947 kB` `11.506 kB`	`34.274 kB` `11.069 kB`	`-2.673 kB` `-437 B`
`react-spinbutton` SpinButton	`36.718 kB` `10.802 kB`	`34.045 kB` `10.376 kB`	`-2.673 kB` `-426 B`
`react-spinner` Spinner	`23.498 kB` `7.244 kB`	`20.882 kB` `6.798 kB`	`-2.616 kB` `-446 B`
`react-switch` Switch	`32.503 kB` `9.732 kB`	`29.806 kB` `9.274 kB`	`-2.697 kB` `-458 B`
`react-table` DataGrid	`150.617 kB` `41.075 kB`	`147.821 kB` `40.593 kB`	`-2.796 kB` `-482 B`
`react-table` Table (Primitives only)	`47.03 kB` `12.784 kB`	`44.348 kB` `12.347 kB`	`-2.682 kB` `-437 B`
`react-table` Table as DataGrid	`133.181 kB` `33.644 kB`	`130.378 kB` `33.193 kB`	`-2.803 kB` `-451 B`
`react-table` Table (Selection only)	`81.092 kB` `19.641 kB`	`78.289 kB` `19.194 kB`	`-2.803 kB` `-447 B`
`react-table` Table (Sort only)	`80.422 kB` `19.453 kB`	`77.619 kB` `19.004 kB`	`-2.803 kB` `-449 B`
`react-text` Text - Default	`15.08 kB` `5.353 kB`	`12.492 kB` `4.92 kB`	`-2.588 kB` `-433 B`
`react-textarea` Textarea	`30.235 kB` `9.521 kB`	`27.562 kB` `9.087 kB`	`-2.673 kB` `-434 B`
`react-tooltip` Tooltip	`49.492 kB` `16.862 kB`	`46.819 kB` `16.412 kB`	`-2.673 kB` `-450 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-card` Card - All	`86.061 kB` `24.345 kB`
`react-card` Card	`80.997 kB` `22.895 kB`
`react-card` CardFooter	`9.158 kB` `3.844 kB`
`react-card` CardHeader	`11.048 kB` `4.538 kB`
`react-card` CardPreview	`9.963 kB` `4.192 kB`
`react-link` Link	`12.357 kB` `5.091 kB`
`react-portal` Portal	`11.649 kB` `4.263 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.185 kB`
`react-positioning` usePositioning	`24.008 kB` `8.798 kB`
`react-text` Text - Wrappers	`15.63 kB` `5.25 kB`

_{🤖 This report was generated against c16f83e22aadf7756bf50d7f72d1ffa4b991dd11}

fabricteam · 2023-04-07T20:54:45Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	699	705	5000
Button	mount	380	387	5000
Field	mount	1273	1292	5000
FluentProvider	mount	930	902	5000
FluentProviderWithTheme	mount	120	118	10
FluentProviderWithTheme	virtual-rerender	96	99	10
FluentProviderWithTheme	virtual-rerender-with-unmount	112	111	10
InfoButton	mount	14	19	5000
MakeStyles	mount	1134	1134	50000
Persona	mount	2026	1928	5000
SpinButton	mount	1565	1599	5000

size-auditor · 2023-04-07T20:55:43Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: c16f83e22aadf7756bf50d7f72d1ffa4b991dd11 (build)

fabricteam · 2023-04-07T21:07:25Z

🕵 fluentuiv9 No visual regressions between this PR and main

packages/react-components/react-divider/src/components/Divider/Divider.tsx

* master: applying package updates microsoft#25730: TimePicker Default Value Fix, Controllable Usage, Example Updates (microsoft#26482) docs(react-datepicker-compat): Add description to README.md (microsoft#27677) Updated to use single hook selector (microsoft#27491) fix: Make border around Avatar's badge transparent using a mask (microsoft#27527) Disable focus on non-interactive elements (microsoft#27580) feat(react-drawer): implement "prevent close on click outside" feature (microsoft#27551)

* feat/drawer-components: (81 commits) docs: remove TODO marks fix: remove conflict code leftover applying package updates microsoft#25730: TimePicker Default Value Fix, Controllable Usage, Example Updates (microsoft#26482) docs(react-datepicker-compat): Add description to README.md (microsoft#27677) Updated to use single hook selector (microsoft#27491) fix: Make border around Avatar's badge transparent using a mask (microsoft#27527) Disable focus on non-interactive elements (microsoft#27580) feat(react-drawer): implement "prevent close on click outside" feature (microsoft#27551) fix(react-datepicker-compat): Make onValidationError onValidationResult so the error is updated when there's no longer an error (microsoft#27655) Fix `@fluentui/react-portal-compat`: to be compatible with React 18 (microsoft#27577) chore: fix versions of @fluentui/react-datepicker-compat (microsoft#27666) applying package updates applying package updates Make line chart screen reader accessible (microsoft#27632) fix(react-examples): Improve keyboard navigation in ContextualMenu.CustomMenuList (microsoft#25172) docs(react-textarea): Update examples to use Field (microsoft#27644) bugfix(react-dialog): `DialogTitle` root as `h2` by default (microsoft#27555) applying package updates chore: restructure stories, add separate category for flat tree (microsoft#27586) ...

msft-fluent-ui-bot · 2023-05-15T07:37:43Z