Skip to content

Conversation

@bsunderhus
Copy link
Contributor

New Behavior

  1. Simplifies useControllableState implementation but ensuring same functionality according to tests

@bsunderhus bsunderhus self-assigned this Apr 26, 2023
@github-actions github-actions bot added this to the April Project Cycle Q2 2023 milestone Apr 26, 2023
@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit df609f8:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor
Copy link

size-auditor bot commented Apr 26, 2023

Asset size changes

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

Baseline commit: 37e89b9319db7f31f3afe0d38fc31eac40cb5eaf (build)

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)
86.172 kB
26.143 kB
86.012 kB
26.086 kB
-160 B
-57 B
react-button
ToggleButton
55.559 kB
11.479 kB
55.397 kB
11.435 kB
-162 B
-44 B
react-checkbox
Checkbox
34.379 kB
10.833 kB
34.216 kB
10.784 kB
-163 B
-49 B
react-combobox
Combobox (including child components)
87.056 kB
28.011 kB
87.199 kB
28.095 kB
143 B
84 B
react-combobox
Dropdown (including child components)
85.74 kB
27.747 kB
85.583 kB
27.692 kB
-157 B
-55 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
204.498 kB
57.184 kB
204.34 kB
57.14 kB
-158 B
-44 B
react-datepicker-compat
DatePicker Compat
220.414 kB
58.527 kB
220.251 kB
58.472 kB
-163 B
-55 B
react-dialog
Dialog (including children components)
91.028 kB
27.083 kB
90.867 kB
27.047 kB
-161 B
-36 B
react-infobutton
InfoButton
128.088 kB
39.045 kB
127.925 kB
39.001 kB
-163 B
-44 B
react-infobutton
InfoLabel
131.371 kB
40.039 kB
131.208 kB
39.998 kB
-163 B
-41 B
react-input
Input
24.133 kB
7.723 kB
23.972 kB
7.676 kB
-161 B
-47 B
react-menu
Menu (including children components)
128.359 kB
39.232 kB
128.202 kB
39.18 kB
-157 B
-52 B
react-menu
Menu (including selectable components)
131.343 kB
39.747 kB
131.186 kB
39.696 kB
-157 B
-51 B
react-popover
Popover
115.071 kB
35.448 kB
114.917 kB
35.388 kB
-154 B
-60 B
react-slider
Slider
34.274 kB
11.069 kB
34.112 kB
11.018 kB
-162 B
-51 B
react-spinbutton
SpinButton
34.045 kB
10.376 kB
33.882 kB
10.325 kB
-163 B
-51 B
react-table
DataGrid
147.821 kB
40.593 kB
147.659 kB
40.567 kB
-162 B
-26 B
react-table
Table as DataGrid
130.378 kB
33.193 kB
130.218 kB
33.128 kB
-160 B
-65 B
react-table
Table (Selection only)
78.289 kB
19.194 kB
78.132 kB
19.127 kB
-157 B
-67 B
react-table
Table (Sort only)
77.619 kB
19.004 kB
77.462 kB
18.939 kB
-157 B
-65 B
react-textarea
Textarea
27.562 kB
9.087 kB
27.399 kB
9.041 kB
-163 B
-46 B
react-tooltip
Tooltip
46.819 kB
16.412 kB
46.656 kB
16.372 kB
-163 B
-40 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
533 B
341 B
global-context
createContextSelector
560 B
352 B
react-alert
Alert
93.779 kB
22.493 kB
react-avatar
Avatar
57.544 kB
14.966 kB
react-avatar
AvatarGroup
15.632 kB
6.258 kB
react-avatar
AvatarGroupItem
73.758 kB
19.478 kB
react-badge
Badge
23.512 kB
7.197 kB
react-badge
CounterBadge
24.416 kB
7.506 kB
react-badge
PresenceBadge
31.904 kB
8.296 kB
react-button
Button
37.179 kB
9.534 kB
react-button
CompoundButton
44.328 kB
11.016 kB
react-button
MenuButton
41.866 kB
10.861 kB
react-button
SplitButton
50.254 kB
12.441 kB
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-components
react-components: Button, FluentProvider & webLightTheme
65.31 kB
17.931 kB
react-components
react-components: FluentProvider & webLightTheme
36.086 kB
11.9 kB
react-divider
Divider
17.399 kB
6.298 kB
react-field
Field
18.864 kB
7.004 kB
react-image
Image
11.479 kB
4.573 kB
react-label
Label
10.104 kB
4.185 kB
react-link
Link
12.357 kB
5.091 kB
react-overflow
hooks only
11.214 kB
4.271 kB
react-persona
Persona
64.465 kB
16.892 kB
react-portal
Portal
11.649 kB
4.263 kB
react-portal-compat
PortalCompatProvider
6.446 kB
2.186 kB
react-positioning
usePositioning
24.008 kB
8.798 kB
react-progress
ProgressBar
13.856 kB
5.434 kB
react-provider
FluentProvider
18.033 kB
6.666 kB
react-radio
Radio
27.282 kB
8.661 kB
react-radio
RadioGroup
11.312 kB
4.71 kB
react-select
Select
25.357 kB
8.798 kB
react-spinner
Spinner
20.882 kB
6.798 kB
react-switch
Switch
29.806 kB
9.274 kB
react-table
Table (Primitives only)
44.348 kB
12.347 kB
react-text
Text - Default
12.492 kB
4.92 kB
react-text
Text - Wrappers
15.63 kB
5.25 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against fa0f2ce25e94ddc8759f545638e01cc34e0e99f4

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
InfoButton mount 22 19 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 824 841 5000
Button mount 454 434 5000
Field mount 1507 1566 5000
FluentProvider mount 1073 1079 5000
FluentProviderWithTheme mount 133 132 10
FluentProviderWithTheme virtual-rerender 110 118 10
FluentProviderWithTheme virtual-rerender-with-unmount 123 116 10
InfoButton mount 22 19 5000 Possible regression
MakeStyles mount 1307 1318 50000
Persona mount 2444 2364 5000
SpinButton mount 1870 1856 5000

@bsunderhus bsunderhus marked this pull request as ready for review April 26, 2023 14:43
@bsunderhus bsunderhus requested a review from a team as a code owner April 26, 2023 14:43
@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@ling1726
Copy link
Contributor

@bsunderhus I think this PR also fixes #25748, would you be able to check?

@bsunderhus bsunderhus merged commit 557ffca into microsoft:master Apr 26, 2023
@bsunderhus bsunderhus deleted the react-utilities/chore--simplifies-useControllableState-hook branch April 26, 2023 16:07
* @returns - whether the value is controlled
*/
const useIsControlled = (controlledValue: unknown) => {
const useIsControlled = <V>(controlledValue?: V): controlledValue is V => {
Copy link
Member

Choose a reason for hiding this comment

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

nit: value should be always passed

const useIsControlled = <V>(controlledValue: V | undefined): controlledValue is V => {

Comment on lines 41 to 42
const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;
const [internalState, setInternalState] = React.useState<State>(initialState);
Copy link
Member

Choose a reason for hiding this comment

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

One more improvement might to move the check to factory, so it will be executed once:

const [internalState, setInternalState] = React.useState<State>(
  () => typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState
);

marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Apr 27, 2023
* master:
  chore: enforce files naming to use .styles.ts [cxe-prg files] (microsoft#27707)
  chore: migrate to NodeJS v16 (microsoft#27711)
  remove react-avatar-context package (microsoft#27709)
  test: migrate all v9 libraries to use new conformance setup which improves test execution by approx 46% (microsoft#27669)
  chore: Add caret to react-datepicker-compat dependencies (microsoft#27671)
  test(fluentui/react): fix initial global leaks that were causing OOM issues (microsoft#27661)
  chore(react-utilities): simplifies useControllableState hook internals (microsoft#27702)
  chore: enforce files naming to use .styles.ts (microsoft#27698)
  feat: adds lazy loading example (microsoft#27587)
  feat: react-combobox space conditionally inserts character when freeform is true (microsoft#27025)
  chore(react-tree): updates useOpenItemsState internals (microsoft#27697)
  feat(tools): add conformance setup migration to migrate-converged-pkg generator (microsoft#27668)
  test: use `isolatedModules` for all ts-jest configs to lower memory footprint on CI (microsoft#27670)
  chore: bump @griffel/eslint-plugin & enable @griffel/hook-naming (microsoft#27687)
  feat(react-tree): makes useFlatTree generic (microsoft#27682)
  Enable export to codepen for charting library (microsoft#27539)
  Overflow: added useOverflowCount to exports (microsoft#27678)
  fix: Menu should not steal focus on re-render (microsoft#27688)
  feat(react-conformance): add new TS config api to be able to specify configName and configDir (microsoft#27664)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Apr 27, 2023
* feat/drawer-components: (28 commits)
  docs: update API
  feat: add style overrides for upcoming drawer components
  feat: add support to override drawer styles
  fix: prevent elements from stretching
  chore: upgrade devcontainer node version to 16 (microsoft#27716)
  fix: rename styles file to use the newer naming conventions
  test: add cypress tests for scroll positions
  chore: enforce files naming to use .styles.ts [cxe-prg files] (microsoft#27707)
  feat: add support to override drawer body styles
  chore: migrate to NodeJS v16 (microsoft#27711)
  remove react-avatar-context package (microsoft#27709)
  test: migrate all v9 libraries to use new conformance setup which improves test execution by approx 46% (microsoft#27669)
  chore: Add caret to react-datepicker-compat dependencies (microsoft#27671)
  test(fluentui/react): fix initial global leaks that were causing OOM issues (microsoft#27661)
  chore(react-utilities): simplifies useControllableState hook internals (microsoft#27702)
  chore: enforce files naming to use .styles.ts (microsoft#27698)
  feat: adds lazy loading example (microsoft#27587)
  feat: react-combobox space conditionally inserts character when freeform is true (microsoft#27025)
  chore(react-tree): updates useOpenItemsState internals (microsoft#27697)
  feat(tools): add conformance setup migration to migrate-converged-pkg generator (microsoft#27668)
  ...
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

layershifter added a commit to layershifter/office-ui-fabric-react that referenced this pull request May 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants