Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(react-utilities): useControllableState warns if controlled and uncontrolled at the same time #31461

Merged
merged 3 commits into from
Jun 4, 2024
Merged

chore(react-utilities): useControllableState warns if controlled and uncontrolled at the same time #31461

merged 3 commits into from
Jun 4, 2024

Conversation

bsunderhus
Copy link
Contributor

@bsunderhus bsunderhus commented May 23, 2024 •
edited
Loading

Previous Behavior

Using both controlled and uncontrolled state on useControllableState hook would default to the state value, which is expected.

In native react elements (such as input) if the user provides both controlled value and uncontrolled defaultValue an error will be displayed in the console:

image

The element works as expected, the controlled value takes precedence, but the warning is emitted as extra information to avoid confusion from the user side (as something might be going wrong if the user is providing both)

New Behavior

  1. consoles a warning whenever the user provide both controlled and uncontrolled state value, similar to what react does on native elements.
  2. refactors react-utilities tests to count for the console.error
  3. updates v9 packages to properly use the hook
    • react-accordion
    • react-calendar-compat
    • react-list-preview
    • react-search
    • react-slider
    • react-tree

Related Issue(s)

@bsunderhus bsunderhus self-assigned this May 23, 2024
@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone May 23, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented May 23, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender-with-unmount 77 75 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 622 629 5000
Button mount 301 306 5000
Field mount 1137 1143 5000
FluentProvider mount 708 707 5000
FluentProviderWithTheme mount 85 87 10
FluentProviderWithTheme virtual-rerender 32 36 10
FluentProviderWithTheme virtual-rerender-with-unmount 77 75 10 Possible regression
MakeStyles mount 873 877 50000
Persona mount 1771 1708 5000
SpinButton mount 1352 1425 5000
SwatchPicker mount 1579 1569 5000

@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented May 23, 2024 •
edited
Loading

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.

@fabricteam
Copy link
Collaborator

fabricteam commented May 23, 2024 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)		 100.003 kB
30.524 kB		 100.008 kB
30.527 kB		 5 B
3 B
react-calendar-compat
Calendar Compat		 146.465 kB
39.03 kB		 146.418 kB
39.039 kB		 -47 B
9 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 212.631 kB
61.228 kB		 212.636 kB
61.23 kB		 5 B
2 B
react-components
react-components: entire library		 1.092 MB
269.733 kB		 1.092 MB
269.741 kB		 3 B
8 B
react-datepicker-compat
DatePicker Compat		 220.038 kB
62.373 kB		 220.001 kB
62.377 kB		 -37 B
4 B
react-slider
Slider		 37.195 kB
12.559 kB		 37.168 kB
12.543 kB		 -27 B
-16 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 510 B
328 B
global-context
createContextSelector		 537 B
339 B
react-alert
Alert		 78.817 kB
22.543 kB
react-avatar
Avatar		 49.299 kB
15.837 kB
react-avatar
AvatarGroup		 20.107 kB
7.973 kB
react-avatar
AvatarGroupItem		 63.316 kB
20.017 kB
react-badge
Badge		 25.95 kB
8.612 kB
react-badge
CounterBadge		 26.729 kB
8.886 kB
react-badge
PresenceBadge		 25.717 kB
9.483 kB
react-breadcrumb
@fluentui/react-breadcrumb - package		 114.486 kB
31.821 kB
react-button
Button		 37.103 kB
10.784 kB
react-button
CompoundButton		 43.514 kB
12.074 kB
react-button
MenuButton		 41.884 kB
12.132 kB
react-button
SplitButton		 49.896 kB
13.724 kB
react-button
ToggleButton		 53.03 kB
12.543 kB
react-card
Card - All		 101.184 kB
29.049 kB
react-card
Card		 94.218 kB
27.333 kB
react-card
CardFooter		 14.354 kB
5.795 kB
react-card
CardHeader		 16.618 kB
6.555 kB
react-card
CardPreview		 14.418 kB
5.931 kB
react-checkbox
Checkbox		 35.103 kB
12.11 kB
react-combobox
Combobox (including child components)		 100.496 kB
33.156 kB
react-combobox
Dropdown (including child components)		 101.129 kB
33.096 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 69.141 kB
20.157 kB
react-components
react-components: FluentProvider & webLightTheme		 44.442 kB
14.607 kB
react-dialog
Dialog (including children components)		 98.817 kB
29.825 kB
react-divider
Divider		 21.326 kB
7.963 kB
react-field
Field		 23.382 kB
8.901 kB
react-image
Image		 15.36 kB
6.245 kB
react-input
Input		 27.985 kB
9.444 kB
react-jsx-runtime
Classic Pragma		 1.057 kB
530 B
react-jsx-runtime
JSX Dev Runtime		 3.781 kB
1.646 kB
react-jsx-runtime
JSX Runtime		 4.377 kB
1.881 kB
react-label
Label		 14.67 kB
6 kB
react-link
Link		 17.191 kB
6.991 kB
react-menu
Menu (including children components)		 152.023 kB
45.98 kB
react-menu
Menu (including selectable components)		 154.709 kB
46.477 kB
react-message-bar
MessageBar (all components)		 24.411 kB
9.114 kB
react-overflow
hooks only		 12.87 kB
4.83 kB
react-persona
Persona		 56.19 kB
17.726 kB
react-popover
Popover		 127.766 kB
40.096 kB
react-portal
Portal		 14.563 kB
5.118 kB
react-portal-compat
PortalCompatProvider		 8.39 kB
2.64 kB
react-positioning
usePositioning		 26.489 kB
9.552 kB
react-progress
ProgressBar		 17.084 kB
6.904 kB
react-provider
FluentProvider		 24.616 kB
8.903 kB
react-radio
Radio		 32.671 kB
10.348 kB
react-radio
RadioGroup		 15.758 kB
6.431 kB
react-select
Select		 27.636 kB
10.106 kB
react-spinbutton
SpinButton		 36.047 kB
11.833 kB
react-spinner
Spinner		 25.244 kB
8.552 kB
react-swatch-picker
@fluentui/react-swatch-picker - package		 104.378 kB
30.355 kB
react-switch
Switch		 35.299 kB
11.345 kB
react-table
DataGrid		 162.843 kB
46.317 kB
react-table
Table (Primitives only)		 42.48 kB
13.866 kB
react-table
Table as DataGrid		 131.934 kB
36.682 kB
react-table
Table (Selection only)		 70.334 kB
20.026 kB
react-table
Table (Sort only)		 68.977 kB
19.63 kB
react-tag-picker
@fluentui/react-tag-picker - package		 181.063 kB
54.547 kB
react-tags
InteractionTag		 15.165 kB
6.134 kB
react-tags
Tag		 28.994 kB
9.518 kB
react-tags
TagGroup		 82.911 kB
24.642 kB
react-text
Text - Default		 17.061 kB
6.731 kB
react-text
Text - Wrappers		 20.233 kB
7.061 kB
react-textarea
Textarea		 26.519 kB
9.739 kB
react-timepicker-compat
TimePicker		 103.294 kB
34.527 kB
react-toast
Toast (including Toaster)		 99.625 kB
30.033 kB
react-tooltip
Tooltip		 54.556 kB
19.226 kB
react-utilities
SSRProvider		 180 B
160 B
🤖 This report was generated against 555e0a46194c65ea5cfcd9bd8b242b66386147c4

@bsunderhus bsunderhus marked this pull request as ready for review May 23, 2024 11:56
@bsunderhus bsunderhus requested a review from a team as a code owner May 23, 2024 11:56
@bsunderhus bsunderhus force-pushed the react-utilities/chore--useControllableState-errors-if-controlled-and-uncontrolled branch from 4a48123 to 052dc19 Compare May 24, 2024 10:03
@bsunderhus bsunderhus force-pushed the react-utilities/chore--useControllableState-errors-if-controlled-and-uncontrolled branch from 052dc19 to fbacd9a Compare May 24, 2024 11:49
@bsunderhus bsunderhus marked this pull request as draft May 24, 2024 12:31
@bsunderhus bsunderhus marked this pull request as ready for review May 24, 2024 13:18
@bsunderhus bsunderhus merged commit 95251e7 into microsoft:master Jun 4, 2024
20 checks passed
@bsunderhus bsunderhus deleted the react-utilities/chore--useControllableState-errors-if-controlled-and-uncontrolled branch June 4, 2024 19:29
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024
@bsunderhus @miroslavstastny
chore(react-utilities): useControllableState warns if controlled and …
aaec506 
…uncontrolled at the same time (microsoft#31461)
@bsunderhus bsunderhus mentioned this pull request Jun 20, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fabricteam fabricteam fabricteam left review comments

@ling1726 ling1726 ling1726 approved these changes

@smhigley smhigley smhigley approved these changes

@sopranopillow sopranopillow Awaiting requested review from sopranopillow

@micahgodbolt micahgodbolt Awaiting requested review from micahgodbolt

Assignees

@bsunderhus bsunderhus

Labels
None yet
Projects
None yet
Milestone
April Project Cycle Q1 2024
Development

Successfully merging this pull request may close these issues.

[Bug]: Tree should warn user about wrongly using both defaultOpenItems and openItems
4 participants
@bsunderhus @fabricteam @smhigley @ling1726