Skip to content

Picker and Suggestions: Move the styled call out of render call. #8834

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 6 commits into from
Apr 25, 2019
Merged

Picker and Suggestions: Move the styled call out of render call. #8834

merged 6 commits into from
Apr 25, 2019

Conversation

lijunle
Copy link
Member

@lijunle lijunle commented Apr 24, 2019 •
edited
Loading

It breaks type check on React reconciliation.

Pull request checklist

Description of changes

Solve the picker suggestion item unmount issue:

PeoplePicker-PhotoFlashing

Focus areas to test

Pickers.

Microsoft Reviewers: Open in CodeFlow

lijunle added 2 commits April 24, 2019 18:11
@lijunle
Move the styled call out of render call.
99c2834 
- It breaks type check on React reconciliation.
@lijunle
Add change file.
6d95ef1
@lijunle lijunle requested a review from joschect as a code owner April 24, 2019 10:16
@msft-github-bot
Copy link
Contributor

msft-github-bot commented Apr 24, 2019 •
edited
Loading

Component perf results:

Scenario Target branch avg total (ms) PR avg total (ms) Target branch avg per item (ms) PR avg per item (ms)
PrimaryButton 93.732 96.184 0.937 0.962
BaseButton 33.751 32.651 0.338 0.327
NewButton 109.597 113.244 1.096 1.132
button 4.946 4.846 0.049 0.048
DetailsRows without styles 185.920 178.265 1.859 1.783
DetailsRows 182.316 188.978 1.823 1.890
Toggles 45.403 46.239 0.454 0.462
NewToggle 66.765 61.231 0.668 0.612

@size-auditor
Copy link

size-auditor bot commented Apr 24, 2019 •
edited
Loading

Bundle test Size (minified) Diff from master
Pickers 258.414 kB BelowBaseline     -122 bytes

ExceedsTolerance  Exceeds Tolerance     ExceedsBaseline  Exceeds Baseline     BelowBaseline  Below Baseline     1 kB = 1000 bytes

@ecraig12345 ecraig12345 changed the title Move the styled call out of render call. Picker and Suggestions: Move the styled call out of render call. Apr 24, 2019
Adjective-Object
Adjective-Object approved these changes Apr 24, 2019
View reviewed changes
Copy link
Contributor

@Adjective-Object Adjective-Object left a comment •
edited
Loading

Choose a reason for hiding this comment

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

lgtm, apart from some nitpicking. Thanks for the cleanup :)

@lijunle
Copy link
Member Author

lijunle commented Apr 25, 2019

@Adjective-Object Thank you very much for reviewing! I have polished the code to avoid the any typing inside render method. By the way, this is more than a cleanup - it is a crazy bug on performance and usability. The styled call inside React render method breaks the React reconciliation comparison between old tree and new tree. So, the whole DOM will be unmount-then-remount on each arrow key moves.

@joschect @ecraig12345 @KevinTCoughlin Do you have more comments on the pull request? I think it OK to merge it to master.

Vitalius1
Vitalius1 approved these changes Apr 25, 2019
View reviewed changes
Copy link
Contributor

@Vitalius1 Vitalius1 left a comment

Choose a reason for hiding this comment

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

Looks like this was introduced by me when I did the css-in-js conversion of the pickers 😊 . Thanks for fixing it and apologies for not noticing the flashing regression.

JasonGore
JasonGore approved these changes Apr 25, 2019
View reviewed changes
Copy link
Member

@JasonGore JasonGore left a comment

Choose a reason for hiding this comment

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

Good catch.

@lijunle
Copy link
Member Author

lijunle commented Apr 25, 2019

@joschect @JasonGore Could you please help to complete the PR?

@JasonGore JasonGore merged commit 5a0d2d2 into microsoft:master Apr 25, 2019
@lijunle lijunle deleted the picker/fix-flashing branch April 25, 2019 16:22
@msft-github-bot
Copy link
Contributor

🎉[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot msft-github-bot mentioned this pull request Apr 26, 2019
Closed
@lijunle lijunle mentioned this pull request Apr 28, 2019
Merged
2 tasks
@microsoft microsoft locked as resolved and limited conversation to collaborators Aug 30, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@KevinTCoughlin KevinTCoughlin KevinTCoughlin approved these changes

@Adjective-Object Adjective-Object Adjective-Object approved these changes

@joschect joschect joschect approved these changes

@JasonGore JasonGore JasonGore approved these changes

@Vitalius1 Vitalius1 Vitalius1 approved these changes

Assignees

@ecraig12345 ecraig12345

Labels
Component: Pickers
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

The screen reader says nothing when navigate inside people picker suggestion list
8 participants
@lijunle @msft-github-bot @KevinTCoughlin @Adjective-Object @joschect @JasonGore @Vitalius1 @ecraig12345