Skip to content
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.

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

fix: switching in project tree is lagging #5524

Merged
merged 3 commits into from
Jan 14, 2021
Merged

Conversation

lei9444
Copy link
Contributor

@lei9444 lei9444 commented Jan 14, 2021

Description

Switching in project tree is causing too much re-rendering (including some full re-rendering), up to 8 times in a simple switch. This fix some simple refactoring that saves us at least 4 full rendering times, leaves us to 3-4 partial rendering. Will continue investigate the other unnecessary rendering.

The goal eventually is to have only one rendering in one switch.

Root cause

  1. We always set local state in useEffect when location change.
  2. We are setting < breadcrumb /> when switching the item, but the state only used by breadcrumb component and put it in the < DesignPage /> will make the page full re-render.
  3. The < App /> will listen to the url to initialize the logger, the location change will make the whole app re-render

Fix

  1. add value check, if no change, do nothing
  2. move the < Breadscrum/> to a single component, and let it's own to manage the state
  3. The same as 2

next step

  1. split the < DesignPage />
  2. investigate the reach/router's state management, There is still a full re-render caused by Router

Task Item

#minor

Screenshots

before

image

after

image

Copy link
Contributor

@zhixzhan zhixzhan left a comment

Choose a reason for hiding this comment

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

Looks good to me, split design page breadcrumb to a self render components really improve a lot.

@boydc2014 boydc2014 changed the title fix: project tree switch item lagging fix: switching in project tree is lagging Jan 14, 2021
@coveralls
Copy link

Coverage Status

Coverage increased (+0.2%) to 55.065% when pulling 9ef8cf1 on lei9444:switch into 70c0d7b on microsoft:main.

@boydc2014 boydc2014 merged commit a77f39b into microsoft:main Jan 14, 2021
lei9444 added a commit that referenced this pull request Jan 14, 2021
* fix: project tree switch item lagging

* fix tests

Co-authored-by: Dong Lei <donglei@microsoft.com>
@lei9444 lei9444 deleted the switch branch February 1, 2021 02:06
benbrown pushed a commit to benbrown/BotFramework-Composer that referenced this pull request May 24, 2021
* fix: project tree switch item lagging

* fix tests

Co-authored-by: Dong Lei <donglei@microsoft.com>
benbrown pushed a commit that referenced this pull request Jun 11, 2021
* fix: project tree switch item lagging

* fix tests

Co-authored-by: Dong Lei <donglei@microsoft.com>
lei9444 added a commit to lei9444/BotFramework-Composer-1 that referenced this pull request Jun 15, 2021
* fix: project tree switch item lagging

* fix tests

Co-authored-by: Dong Lei <donglei@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants