search

microsoft / fluent-ui-react

An ecosystem for building highly customizable enterprise class user interfaces.
https://aka.ms/fluent-ui
MIT License
433 stars 54 forks source link

feat(hooks): add useAutoControlled() hook #2348

Closed layershifter closed 4 years ago

layershifter commented 4 years ago

This PR adds useAutoControlled() for cases when useStateManager() is too heavy abstraction, i.e. it's too complicated to use useStateManager() to manager one autocontrolled prop.

Usage

const [value, setValue] = useAutoControlled({
  defaultValue: props.defaultValue,
  value: props.value,

  initialValue: props.initialValue
});

Returned signature mimics React.useState().

DustyTheBot commented 4 years ago
Warnings
:warning: There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.46 0.39 1.18:1 2000 928
🎯 Button.Fluent 0.12 0.17 0.71:1 1000 115
🔧 Checkbox.Fluent 0.95 0.39 2.44:1 1000 952
🔧 Dialog.Fluent 0.33 0.18 1.83:1 5000 1671
🔧 Dropdown.Fluent 3.83 0.38 10.08:1 1000 3826
🔧 Icon.Fluent 0.13 0.03 4.33:1 5000 641
🎯 Image.Fluent 0.05 0.07 0.71:1 5000 247
🔧 Slider.Fluent 1.44 0.36 4:1 1000 1444
🔧 Text.Fluent 0.05 0.02 2.5:1 5000 265
🦄 Tooltip.Fluent 0.12 18.8 0.01:1 5000 580

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions Scenario | Current PR Ticks | Baseline Ticks | Ratio :--- | ---:| ---:| ---: SplitButtonMinimalPerf.default | [13738](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default.html) | [11336](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default_base.html) | 1.21:1 DropdownManyItemsPerf.default | [493](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default.html) | [421](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default_base.html) | 1.17:1 TextMinimalPerf.default | [285](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default.html) | [247](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default_base.html) | 1.15:1 Checkbox.Fluent | [952](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent.html) | [828](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent_base.html) | 1.15:1 PopupMinimalPerf.default | [337](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default.html) | [299](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default_base.html) | 1.13:1 Icon.Fluent | [641](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent.html) | [565](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent_base.html) | 1.13:1 AlertMinimalPerf.default | [590](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default.html) | [526](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default_base.html) | 1.12:1 DialogMinimalPerf.default | [1807](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default.html) | [1625](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default_base.html) | 1.11:1 Dropdown.Fluent | [3826](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent.html) | [3438](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent_base.html) | 1.11:1 MenuButtonMinimalPerf.default | [1692](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default.html) | [1542](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default_base.html) | 1.1:1 HierarchicalTreeMinimalPerf.default | [809](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default.html) | [739](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default_base.html) | 1.09:1 ImageMinimalPerf.default | [238](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default.html) | [221](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default_base.html) | 1.08:1 DividerMinimalPerf.default | [923](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default.html) | [864](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default_base.html) | 1.07:1 GridMinimalPerf.default | [848](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default.html) | [796](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default_base.html) | 1.07:1 ItemLayoutMinimalPerf.default | [2063](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default.html) | [1933](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default_base.html) | 1.07:1 TooltipMinimalPerf.default | [924](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default.html) | [874](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default_base.html) | 1.06:1 AttachmentMinimalPerf.default | [886](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default.html) | [855](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default_base.html) | 1.04:1 ChatMinimalPerf.default | [1841](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default.html) | [1762](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default_base.html) | 1.04:1 DropdownMinimalPerf.default | [3466](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default.html) | [3332](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default_base.html) | 1.04:1 InputMinimalPerf.default | [1213](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default.html) | [1169](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default_base.html) | 1.04:1 Image.Fluent | [247](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent.html) | [237](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent_base.html) | 1.04:1 EmbedMinimalPerf.default | [6027](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default.html) | [5871](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default_base.html) | 1.03:1 StatusMinimalPerf.default | [231](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default.html) | [224](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default_base.html) | 1.03:1 TableMinimalPerf.default | [621](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default.html) | [605](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default_base.html) | 1.03:1 Dialog.Fluent | [1671](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent.html) | [1615](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent_base.html) | 1.03:1 Text.Fluent | [265](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent.html) | [258](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent_base.html) | 1.03:1 CarouselMinimalPerf.default | [1913](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default.html) | [1883](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default_base.html) | 1.02:1 SegmentMinimalPerf.default | [1254](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default.html) | [1225](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default_base.html) | 1.02:1 VideoMinimalPerf.default | [709](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default.html) | [697](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default_base.html) | 1.02:1 AvatarMinimalPerf.default | [499](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default.html) | [492](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default_base.html) | 1.01:1 ChatDuplicateMessagesPerf.default | [601](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default.html) | [598](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default_base.html) | 1.01:1 HeaderSlotsPerf.default | [1349](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default.html) | [1334](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default_base.html) | 1.01:1 LayoutMinimalPerf.default | [491](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default.html) | [488](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default_base.html) | 1.01:1 ListCommonPerf.default | [709](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default.html) | [705](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default_base.html) | 1.01:1 RadioGroupMinimalPerf.default | [386](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default.html) | [382](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default_base.html) | 1.01:1 SliderMinimalPerf.default | [1401](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default.html) | [1394](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default_base.html) | 1.01:1 LabelMinimalPerf.default | [764](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default.html) | [761](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default_base.html) | 1:1 TextAreaMinimalPerf.default | [2865](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default.html) | [2879](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default_base.html) | 1:1 CheckboxMinimalPerf.default | [3974](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default.html) | [3997](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default_base.html) | 0.99:1 ProviderMinimalPerf.default | [559](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default.html) | [567](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default_base.html) | 0.99:1 Avatar.Fluent | [928](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent.html) | [933](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent_base.html) | 0.99:1 AccordionMinimalPerf.default | [178](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default.html) | [181](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default_base.html) | 0.98:1 AnimationMinimalPerf.default | [449](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default.html) | [456](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default_base.html) | 0.98:1 ButtonSlotsPerf.default | [570](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default.html) | [584](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default_base.html) | 0.98:1 FlexMinimalPerf.default | [323](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default.html) | [328](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default_base.html) | 0.98:1 ProviderMergeThemesPerf.default | [1041](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default.html) | [1067](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default_base.html) | 0.98:1 AttachmentSlotsPerf.default | [3236](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default.html) | [3332](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default_base.html) | 0.97:1 FormMinimalPerf.default | [712](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default.html) | [735](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default_base.html) | 0.97:1 ReactionMinimalPerf.default | [2489](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default.html) | [2558](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default_base.html) | 0.97:1 ToolbarMinimalPerf.default | [725](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default.html) | [748](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default_base.html) | 0.97:1 Slider.Fluent | [1444](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent.html) | [1489](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent_base.html) | 0.97:1 HeaderMinimalPerf.default | [461](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default.html) | [478](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default_base.html) | 0.96:1 ListMinimalPerf.default | [312](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default.html) | [324](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default_base.html) | 0.96:1 RefMinimalPerf.default | [152](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default.html) | [158](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default_base.html) | 0.96:1 ButtonMinimalPerf.default | [140](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default.html) | [147](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default_base.html) | 0.95:1 TreeMinimalPerf.default | [879](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default.html) | [939](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default_base.html) | 0.94:1 IconMinimalPerf.default | [276](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default.html) | [296](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default_base.html) | 0.93:1 ChatWithPopoverPerf.default | [585](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default.html) | [638](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default_base.html) | 0.92:1 PortalMinimalPerf.default | [223](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default.html) | [242](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default_base.html) | 0.92:1 Tooltip.Fluent | [580](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent.html) | [629](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent_base.html) | 0.92:1 CustomToolbarPrototype.default | [3622](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default.html) | [4244](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default_base.html) | 0.85:1 LoaderMinimalPerf.default | [2042](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default.html) | [2524](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default_base.html) | 0.81:1 MenuMinimalPerf.default | [2007](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default.html) | [2485](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default_base.html) | 0.81:1 BoxMinimalPerf.default | [234](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default.html) | [296](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default_base.html) | 0.79:1 Button.Fluent | [115](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent.html) | [145](https://23007-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent_base.html) | 0.79:1

Generated by :no_entry_sign: dangerJS