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

perf: remove Box usages where it is redundant #2023

Merged
merged 2 commits into from
Oct 11, 2019

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Oct 11, 2019

⚠️ Do not use Box until there is a need

The idea of usage Box/any other component with .create() is to provide access to slots via shorthands. However, in these cases we didn't expose these slots so there is no need in Box.create() as it creates additional performance overhead via computing styles for Box.


🚀 Measures

Perf sample renders 100 attachments:

import { Attachment } from '@stardust-ui/react'
import * as _ from 'lodash'
import * as React from 'react'

const AttachmentPerf = () => (
  <>
    {_.times(100, i => <Attachment key={i} progress={66} />)}
  </>
)

export default AttachmentPerf

Diff is around 7.60%.

Before

Example Avg Median
Attachment.perf.tsx 224.73 221.89

After

Example Avg Median
Attachment.perf.tsx 208.16 205.63

@codecov
Copy link

codecov bot commented Oct 11, 2019

Codecov Report

Merging #2023 into master will decrease coverage by 6.24%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #2023      +/-   ##
==========================================
- Coverage    75.8%   69.56%   -6.25%     
==========================================
  Files         160      900     +740     
  Lines        5572     7977    +2405     
  Branches     1614     2311     +697     
==========================================
+ Hits         4224     5549    +1325     
- Misses       1334     2414    +1080     
  Partials       14       14
Impacted Files Coverage Δ
packages/react/src/components/Tooltip/Tooltip.tsx 63.01% <ø> (ø) ⬆️
...es/react/src/components/Tooltip/TooltipContent.tsx 100% <100%> (ø) ⬆️
...ckages/react/src/components/Popup/PopupContent.tsx 100% <100%> (+4.54%) ⬆️
...ges/react/src/components/Attachment/Attachment.tsx 91.3% <100%> (+3.8%) ⬆️
...s/components/RadioGroup/radioGroupItemVariables.ts 0% <0%> (ø)
...mponents/Icon/svg/ProcessedIcons/icons-zoom-in.tsx 100% <0%> (ø)
.../components/Icon/svg/ProcessedIcons/icons-hand.tsx 100% <0%> (ø)
...src/themes/teams/components/Dialog/dialogStyles.ts 0% <0%> (ø)
...s/Icon/svg/ProcessedIcons/icons-files-document.tsx 100% <0%> (ø)
.../themes/teams/components/Icon/svg/icons/italic.tsx 100% <0%> (ø)
... and 734 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0ccdfa0...cef8c75. Read the comment docs.

@layershifter layershifter merged commit d4cc17b into master Oct 11, 2019
@layershifter layershifter deleted the perf/remove-dumb-boxes branch October 11, 2019 17:28
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.

2 participants