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

Chart: Improve render performance #27606

Merged
merged 6 commits into from
Oct 9, 2018

Conversation

jsnmoon
Copy link
Member

@jsnmoon jsnmoon commented Oct 3, 2018

This PR refactors the Chart component to be a PureComponent. This prevents unnecessary re-renders when mousing over the chart bars (and triggering a re-render of each <Bar /> in addition to the new <Tooltip />).

Testing instructions

  1. Spin up this branch locally.
  2. Navigate to /stats/day and select your site of choice.
  3. Open your React Devtools and enable Highlight Updates in its configuration.
  4. Mouse over the Chart bars and ensure that only the chart container and the tooltip elements are updated.
  5. Repeat steps 2~4 in production; you'll notice that the chart bars are updated in addition to the chart container and the tooltip elements.

@jsnmoon jsnmoon added Stats Everything related to our analytics product at /stats/ [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Type] Performance labels Oct 3, 2018
@jsnmoon jsnmoon self-assigned this Oct 3, 2018
@jsnmoon jsnmoon requested a review from a team October 3, 2018 21:40
@matticbot
Copy link
Contributor

@ghost
Copy link

ghost commented Oct 3, 2018

That's a great PR description, thank you so much for your effort!

Generated by 🚫 dangerJS

@jsnmoon jsnmoon added Components and removed Stats Everything related to our analytics product at /stats/ labels Oct 3, 2018
Copy link
Contributor

@blowery blowery left a comment

Choose a reason for hiding this comment

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

LGTM. No more light show.

@blowery blowery added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Oct 3, 2018
@jsnmoon jsnmoon merged commit 9eee17f into master Oct 9, 2018
@jsnmoon jsnmoon deleted the improve/chart-component-render-performance branch October 9, 2018 22:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants