Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

chore(Ref): remove toRefObject() function#2287

Merged
layershifter merged 10 commits intomasterfrom
fix/remove-ref-object
Feb 3, 2020
Merged

chore(Ref): remove toRefObject() function#2287
layershifter merged 10 commits intomasterfrom
fix/remove-ref-object

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Jan 29, 2020

Fixes #2283.

BREAKING CHANGES

toRefObject() was removed, to support previous behavior we added target prop support to EventListener and useEventListener() hook.

Before

<EventListener targetRef={toRefObject(document)} />

After

<EventListener target={document} />

….com/stardust-ui/react into fix/remove-ref-object

� Conflicts:
�	packages/react/src/components/Popup/Popup.tsx
@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Feb 3, 2020

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.64 0.39 1.64:1 2000 1283
🔧 Button.Fluent 1.21 0.17 7.12:1 1000 1205
🔧 Checkbox.Fluent 1.35 0.27 5:1 1000 1350
🔧 Dialog.Fluent 0.33 0.17 1.94:1 5000 1659
🔧 Dropdown.Fluent 3.5 0.35 10:1 1000 3501
🔧 Icon.Fluent 0.24 0.03 8:1 5000 1177
🔧 Image.Fluent 0.09 0.07 1.29:1 5000 473
🔧 Slider.Fluent 1.9 0.29 6.55:1 1000 1903
🦄 Text.Fluent 0.05 0.17 0.29:1 5000 247
🦄 Tooltip.Fluent 0.38 18.44 0.02:1 5000 1912

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
BoxMinimalPerf.default 283 223 1.27:1
AttachmentMinimalPerf.default 1128 904 1.25:1
SplitButtonMinimalPerf.default 13955 11264 1.24:1
TooltipMinimalPerf.default 3024 2569 1.18:1
RefMinimalPerf.default 209 190 1.1:1
ImageMinimalPerf.default 628 578 1.09:1
ListMinimalPerf.default 915 841 1.09:1
ReactionMinimalPerf.default 3173 2920 1.09:1
ButtonSlotsPerf.default 2229 2071 1.08:1
FormMinimalPerf.default 933 866 1.08:1
RadioGroupMinimalPerf.default 492 464 1.06:1
GridMinimalPerf.default 940 899 1.05:1
SliderMinimalPerf.default 2352 2260 1.04:1
TreeMinimalPerf.default 1055 1016 1.04:1
DividerMinimalPerf.default 1055 1025 1.03:1
PortalMinimalPerf.default 308 300 1.03:1
ChatDuplicateMessagesPerf.default 705 688 1.02:1
FlexMinimalPerf.default 410 401 1.02:1
ToolbarMinimalPerf.default 999 981 1.02:1
Dialog.Fluent 1659 1621 1.02:1
Slider.Fluent 1903 1861 1.02:1
Tooltip.Fluent 1912 1873 1.02:1
ChatMinimalPerf.default 2042 2019 1.01:1
CheckboxMinimalPerf.default 8486 8367 1.01:1
HeaderSlotsPerf.default 1630 1612 1.01:1
PopupMinimalPerf.default 431 428 1.01:1
ProviderMinimalPerf.default 731 724 1.01:1
Button.Fluent 1205 1195 1.01:1
AlertMinimalPerf.default 672 670 1:1
ChatWithPopoverPerf.default 725 728 1:1
ListCommonPerf.default 1398 1402 1:1
MenuButtonMinimalPerf.default 1809 1818 1:1
StatusMinimalPerf.default 870 871 1:1
Image.Fluent 473 474 1:1
AccordionMinimalPerf.default 234 237 0.99:1
LayoutMinimalPerf.default 614 621 0.99:1
ProviderMergeThemesPerf.default 1451 1465 0.99:1
SegmentMinimalPerf.default 1562 1582 0.99:1
TextAreaMinimalPerf.default 3323 3348 0.99:1
Checkbox.Fluent 1350 1365 0.99:1
InputMinimalPerf.default 1072 1099 0.98:1
MenuMinimalPerf.default 2303 2360 0.98:1
Dropdown.Fluent 3501 3576 0.98:1
AnimationMinimalPerf.default 516 532 0.97:1
DropdownMinimalPerf.default 4610 4740 0.97:1
IconMinimalPerf.default 1322 1381 0.96:1
TextMinimalPerf.default 259 269 0.96:1
VideoMinimalPerf.default 747 782 0.96:1
Icon.Fluent 1177 1232 0.96:1
AttachmentSlotsPerf.default 3554 3725 0.95:1
DialogMinimalPerf.default 1855 1961 0.95:1
EmbedMinimalPerf.default 7305 7695 0.95:1
Avatar.Fluent 1283 1345 0.95:1
ButtonMinimalPerf.default 1530 1636 0.94:1
CarouselMinimalPerf.default 2149 2287 0.94:1
LabelMinimalPerf.default 1929 2063 0.94:1
CustomToolbarPrototype.default 4751 5029 0.94:1
ItemLayoutMinimalPerf.default 1895 2031 0.93:1
Text.Fluent 247 267 0.93:1
AvatarMinimalPerf.default 690 753 0.92:1
DropdownManyItemsPerf.default 563 620 0.91:1
HierarchicalTreeMinimalPerf.default 927 1046 0.89:1
HeaderMinimalPerf.default 477 551 0.87:1
LoaderMinimalPerf.default 2550 2980 0.86:1
TableMinimalPerf.default 535 631 0.85:1

Generated by 🚫 dangerJS

}, [])

if (process.env.NODE_ENV !== 'production') {
React.useEffect(() => {
Copy link
Member

Choose a reason for hiding this comment

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

We have a check for both being set but no propTypes/check for none. In that case you will receive a cryptic error

Copy link
Member Author

Choose a reason for hiding this comment

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

Add a check 👍

@layershifter layershifter merged commit ec4dd3f into master Feb 3, 2020
@layershifter layershifter deleted the fix/remove-ref-object branch February 3, 2020 13:42
miroslavstastny pushed a commit that referenced this pull request Feb 3, 2020
miroslavstastny pushed a commit that referenced this pull request Feb 3, 2020
@miroslavstastny miroslavstastny mentioned this pull request Feb 3, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

🗑️ chore 🧰 fix Introduces fix for broken behavior. 🚀 ready for review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DOM elements retained in toRefObject

3 participants