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

fix: use and mock lodash debounce in Carousel and Dropdown #2203

Merged
merged 6 commits into from Jan 7, 2020

Conversation

silviuaavram
Copy link
Collaborator

@silviuaavram silviuaavram commented Jan 3, 2020

Removed in-house implementation of debounce and replaced its uses with _.debounce in Dropdown and Carousel.

Properly mocked the function in Dropdown-test as it wasn't working with jest timers. Details in jestjs/jest#3465 and other similar Github issues.

@silviuaavram silviuaavram changed the title chore: use and mock lodash debounce in Carousel and Dropdown fix: use and mock lodash debounce in Carousel and Dropdown Jan 3, 2020
componentWillUnmount() {
clearTimeout(this.a11yStatusTimeout)
clearTimeout(this.charKeysPressedTimeout)
}
Copy link
Member

Choose a reason for hiding this comment

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

Please add an cancel() call for _.debounce:

https://lodash.com/docs/4.17.15#debounce

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

you mean this.clearStartingString.cancel() ?

Copy link
Member

@dzearing dzearing Jan 7, 2020

Choose a reason for hiding this comment

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

I believe this.focusItemAtIndex.cancel() as well

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Solved. Thanks!

@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Jan 3, 2020

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.57 0.41 1.39:1 2000 1137
🔧 Button.Fluent 1.23 0.17 7.24:1 1000 1225
🔧 Checkbox.Fluent 1.55 0.28 5.54:1 1000 1553
🔧 Dialog.Fluent 0.36 0.17 2.12:1 5000 1787
🔧 Dropdown.Fluent 3.23 0.36 8.97:1 1000 3229
🔧 Icon.Fluent 0.26 0.03 8.67:1 5000 1279
🔧 Image.Fluent 0.11 0.08 1.38:1 5000 531
🔧 Slider.Fluent 1.98 0.3 6.6:1 1000 1977
🦄 Text.Fluent 0.06 0.16 0.38:1 5000 280
🦄 Tooltip.Fluent 0.42 16.44 0.03:1 5000 2102

🔧 Needs work     🎯 On target     🦄 Amazing

Generated by 🚫 dangerJS

@@ -213,8 +212,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
itemRefs = [] as React.RefObject<HTMLElement>[]
paddleNextRef = React.createRef<HTMLElement>()
paddlePreviousRef = React.createRef<HTMLElement>()

focusItemAtIndex = debounce((index: number) => {
focusItemAtIndex = _.debounce((index: number) => {
Copy link
Member

@dzearing dzearing Jan 7, 2020

Choose a reason for hiding this comment

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

Minor nullref edge case if you don't cancel this.

@silviuaavram silviuaavram merged commit 7491e57 into master Jan 7, 2020
@silviuaavram silviuaavram deleted the chore/debounce-mock-refactor branch January 7, 2020 15:18
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants