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

chore(Tooltip): move to function component #2357

Closed layershifter closed 4 years ago

layershifter commented 4 years ago

BREAKING CHANGES

As in other components converted to hooks TooltipContent now passes only these props to styles: placement, pointing, open.

Performance

I used an example with 100 opened Tooltips to measure rendering speed. And it almost 2 times faster because of enabled caching (#2309).

yarn perf --filter *TooltipMin*
const TooltipMinimalPerf = () => (
  <>
    {_.times(100, i => (
      <Tooltip key={i} content="Sample">
        <div />
      </Tooltip>
    ))}
  </>
);

Before

Example min avg median max
TooltipMinimal.perf.tsx 74.38 78.47 78.12 104.65
TooltipMinimal.perf.tsx 74.92 78.98 78.19 98.78
TooltipMinimal.perf.tsx 74.99 78.18 77.71 91.64

After without caching

It's also a bit faster because Tooltip now completely omits styles computations.

Example min avg median max
TooltipMinimal.perf.tsx 69.55 76.33 74.1 92.98

After

Example min avg median max
TooltipMinimal.perf.tsx 33.29 38.66 36.8 49.7
TooltipMinimal.perf.tsx 34.18 37.9 36.77 49.52
TooltipMinimal.perf.tsx 33.87 39.07 36.63 51.7
DustyTheBot commented 4 years ago
Warnings
:warning: 2 perf regressions detected

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.46 0.36 1.28:1 2000 920
🎯 Button.Fluent 0.12 0.16 0.75:1 1000 117
🔧 Checkbox.Fluent 0.74 0.28 2.64:1 1000 740
🔧 Dialog.Fluent 0.32 0.16 2:1 5000 1605
🔧 Dropdown.Fluent 3.19 0.34 9.38:1 1000 3186
🔧 Icon.Fluent 0.12 0.03 4:1 5000 591
🦄 Image.Fluent 0.04 0.07 0.57:1 5000 220
🔧 Slider.Fluent 1.4 0.29 4.83:1 1000 1402
🔧 Text.Fluent 0.05 0.02 2.5:1 5000 241
🦄 Tooltip.Fluent 0.09 14.11 0.01:1 5000 430

🔧 Needs work     🎯 On target     🦄 Amazing

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio
StatusMinimalPerf.default 231 228 1.01:1
Tooltip.Fluent 430 591 0.73:1
Perf tests with no regressions Scenario | Current PR Ticks | Baseline Ticks | Ratio :--- | ---:| ---:| ---: ChatDuplicateMessagesPerf.default | [663](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default.html) | [551](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default_base.html) | 1.2:1 PortalMinimalPerf.default | [247](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default.html) | [209](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default_base.html) | 1.18:1 AttachmentMinimalPerf.default | [1118](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default.html) | [958](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default_base.html) | 1.17:1 Button.Fluent | [117](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent.html) | [103](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent_base.html) | 1.14:1 ListNestedPerf.default | [739](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListNestedPerf.default.html) | [660](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListNestedPerf.default_base.html) | 1.12:1 Icon.Fluent | [591](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent.html) | [535](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent_base.html) | 1.1:1 FlexMinimalPerf.default | [355](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default.html) | [325](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default_base.html) | 1.09:1 HeaderSlotsPerf.default | [1451](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default.html) | [1327](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default_base.html) | 1.09:1 RefMinimalPerf.default | [156](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default.html) | [145](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default_base.html) | 1.08:1 FormMinimalPerf.default | [743](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default.html) | [694](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default_base.html) | 1.07:1 ImageMinimalPerf.default | [230](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default.html) | [216](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default_base.html) | 1.06:1 SplitButtonMinimalPerf.default | [11883](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default.html) | [11242](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default_base.html) | 1.06:1 DropdownMinimalPerf.default | [3508](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default.html) | [3333](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default_base.html) | 1.05:1 LayoutMinimalPerf.default | [532](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default.html) | [511](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default_base.html) | 1.04:1 TreeMinimalPerf.default | [831](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default.html) | [800](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default_base.html) | 1.04:1 Tree60WithListItems.default | [218](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tree60WithListItems.default.html) | [209](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tree60WithListItems.default_base.html) | 1.04:1 ChatWithPopoverPerf.default | [585](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default.html) | [567](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default_base.html) | 1.03:1 PopupMinimalPerf.default | [314](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default.html) | [305](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default_base.html) | 1.03:1 SliderMinimalPerf.default | [1507](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default.html) | [1465](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default_base.html) | 1.03:1 TableMinimalPerf.default | [555](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default.html) | [537](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default_base.html) | 1.03:1 AvatarMinimalPerf.default | [519](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default.html) | [507](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default_base.html) | 1.02:1 ButtonSlotsPerf.default | [578](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default.html) | [565](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default_base.html) | 1.02:1 EmbedMinimalPerf.default | [6117](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default.html) | [6009](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default_base.html) | 1.02:1 ListWith60ListItems.default | [146](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListWith60ListItems.default.html) | [143](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListWith60ListItems.default_base.html) | 1.02:1 MenuMinimalPerf.default | [1843](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default.html) | [1813](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default_base.html) | 1.02:1 TextMinimalPerf.default | [281](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default.html) | [276](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default_base.html) | 1.02:1 ToolbarMinimalPerf.default | [684](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default.html) | [669](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default_base.html) | 1.02:1 VideoMinimalPerf.default | [638](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default.html) | [626](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default_base.html) | 1.02:1 Dialog.Fluent | [1605](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent.html) | [1574](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent_base.html) | 1.02:1 CarouselMinimalPerf.default | [1891](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default.html) | [1866](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default_base.html) | 1.01:1 DividerMinimalPerf.default | [847](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default.html) | [840](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default_base.html) | 1.01:1 HierarchicalTreeMinimalPerf.default | [781](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default.html) | [777](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default_base.html) | 1.01:1 IconMinimalPerf.default | [280](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default.html) | [277](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default_base.html) | 1.01:1 InputMinimalPerf.default | [884](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default.html) | [873](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default_base.html) | 1.01:1 ListCommonPerf.default | [770](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default.html) | [766](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default_base.html) | 1.01:1 MenuButtonMinimalPerf.default | [1401](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default.html) | [1382](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default_base.html) | 1.01:1 Avatar.Fluent | [920](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent.html) | [908](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent_base.html) | 1.01:1 Slider.Fluent | [1402](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent.html) | [1386](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent_base.html) | 1.01:1 BoxMinimalPerf.default | [222](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default.html) | [223](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default_base.html) | 1:1 Dropdown.Fluent | [3186](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent.html) | [3184](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent_base.html) | 1:1 Text.Fluent | [241](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent.html) | [242](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent_base.html) | 1:1 AttachmentSlotsPerf.default | [3438](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default.html) | [3462](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default_base.html) | 0.99:1 ChatMinimalPerf.default | [1625](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default.html) | [1635](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default_base.html) | 0.99:1 CheckboxMinimalPerf.default | [3621](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default.html) | [3648](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default_base.html) | 0.99:1 TextAreaMinimalPerf.default | [2767](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default.html) | [2781](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default_base.html) | 0.99:1 LoaderMinimalPerf.default | [2262](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default.html) | [2316](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default_base.html) | 0.98:1 Checkbox.Fluent | [740](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent.html) | [752](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent_base.html) | 0.98:1 ButtonMinimalPerf.default | [116](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default.html) | [119](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default_base.html) | 0.97:1 HeaderMinimalPerf.default | [411](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default.html) | [425](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default_base.html) | 0.97:1 ItemLayoutMinimalPerf.default | [1658](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default.html) | [1704](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default_base.html) | 0.97:1 ProviderMinimalPerf.default | [548](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default.html) | [565](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default_base.html) | 0.97:1 ReactionMinimalPerf.default | [2375](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default.html) | [2448](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default_base.html) | 0.97:1 DialogMinimalPerf.default | [1605](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default.html) | [1671](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default_base.html) | 0.96:1 LabelMinimalPerf.default | [774](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default.html) | [803](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default_base.html) | 0.96:1 ProviderMergeThemesPerf.default | [1020](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default.html) | [1060](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default_base.html) | 0.96:1 Image.Fluent | [220](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent.html) | [228](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent_base.html) | 0.96:1 AccordionMinimalPerf.default | [195](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default.html) | [205](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default_base.html) | 0.95:1 GridMinimalPerf.default | [783](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default.html) | [822](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default_base.html) | 0.95:1 ListMinimalPerf.default | [297](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default.html) | [317](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default_base.html) | 0.94:1 RadioGroupMinimalPerf.default | [382](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default.html) | [405](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default_base.html) | 0.94:1 SegmentMinimalPerf.default | [1198](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default.html) | [1274](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default_base.html) | 0.94:1 CustomToolbarPrototype.default | [3185](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default.html) | [3442](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default_base.html) | 0.93:1 AnimationMinimalPerf.default | [473](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default.html) | [530](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default_base.html) | 0.89:1 DropdownManyItemsPerf.default | [401](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default.html) | [452](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default_base.html) | 0.89:1 AlertMinimalPerf.default | [565](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default.html) | [664](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default_base.html) | 0.85:1 TooltipMinimalPerf.default | [620](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default.html) | [807](https://23098-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default_base.html) | 0.77:1

Generated by :no_entry_sign: dangerJS