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

feat(useStyles): avoid creating new instances of mergedStyles if there are no inline overrides #2226

Merged
merged 8 commits into from
Jan 23, 2020

Conversation

mnajdova
Copy link
Contributor

@mnajdova mnajdova commented Jan 10, 2020

Improved useStyles, to avoid creating new instances of mergedStyles if there are no inline overrides.

-no caching added if some of the prop of the hash obj is function
@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Jan 13, 2020

Warnings
⚠️ 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.63 0.57 1.11:1 2000 1263
🔧 Button.Fluent 1.64 0.16 10.25:1 1000 1637
🔧 Checkbox.Fluent 1.68 0.44 3.82:1 1000 1675
🔧 Dialog.Fluent 0.48 0.24 2:1 5000 2385
🔧 Dropdown.Fluent 4.1 0.5 8.2:1 1000 4099
🔧 Icon.Fluent 0.37 0.05 7.4:1 5000 1851
🔧 Image.Fluent 0.16 0.1 1.6:1 5000 789
🔧 Slider.Fluent 2.65 0.45 5.89:1 1000 2647
🦄 Text.Fluent 0.05 0.24 0.21:1 5000 267
🦄 Tooltip.Fluent 0.43 22.85 0.02:1 5000 2166

🔧 Needs work     🎯 On target     🦄 Amazing

Generated by 🚫 dangerJS

props.styles && withDebugId({ root: props.styles } as ComponentSlotStylesInput, 'props.styles'),
animationStyles && withDebugId({ root: animationStyles }, 'props.animation'),
)
let mergedStyles: ComponentSlotStylesPrepared = theme.componentStyles[displayName] || {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

As the theme is immutable, the mergedStyles by default will always reference to the same object.

animationStyles && withDebugId({ root: animationStyles }, 'props.animation'),
)
let mergedStyles: ComponentSlotStylesPrepared = theme.componentStyles[displayName] || {
root: () => ({}),
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is necessary for the components that don't have any styles in the theme. It is always a new object, but it should be ok as we don't have anything to cache anyway

@mnajdova mnajdova changed the title [WIP] feat(theming): add cache on mergeComponentStyles feat(theming): add cache on mergeComponentStyles Jan 17, 2020
@mnajdova mnajdova changed the title feat(theming): add cache on mergeComponentStyles feat(useStyles): avoid creating new instances of mergedStyles if there are no inline overrides Jan 17, 2020
# Conflicts:
#	packages/react-bindings/src/styles/getStyles.ts
@mnajdova mnajdova merged commit 825179c into master Jan 23, 2020
@mnajdova mnajdova deleted the chore/add-cache-on-merge-component-styles branch January 23, 2020 14:52
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants