Reduce re-renders to fix blinking line in Zoom&Highlight story by PavelVanecek · Pull Request #6315 · recharts/recharts

PavelVanecek · 2025-09-15T03:29:22Z

Description

So the story in question https://main--63da8268a0da9970db6992aa.chromatic.com/iframe.html?globals=&args=&id=examples-linechart--highlight-and-zoom&viewMode=story was doing some pretty silly things:

slice the data array on every render (like wtf, all perf goes out of the window if the core of the whole thing is forcefully updated on mouse move) - there is no point having the data array in the local state anyway so fixed
define helper functions inside of the render method - this is React 101, fixed
define mouse handlers without useCallback - fixed

So this helped a lot, but it's still doing some legit things like:

define domain inline - yes this is React 101 anti-pattern but we also have that in many of our examples so let's optimize for this
renders dynamic component (the Axes) as siblings of the static component (the Lines) - it would help if these were separated in the tree but yet again this is pattern that our docs recommend (and indeed 2.x forced this) so let's optimize for it.

I fixed these by adding React.memo with basic comparator for graphical items, and custom comparator for axes (to catch the domain case). Plus tests.

Related Issue

Fixes #6307

Motivation and Context

Perf perf

Screenshots (if appropriate):

Before

Mouse hover renders YAxis labels:
https://github.com/user-attachments/assets/a7ff70c2-018a-4b5e-a73b-8ad6186f109d

Mouse click renders the whole thing (but nothing visually changes):
https://github.com/user-attachments/assets/c681e3f8-935d-4a49-8257-baf874d715d3

After

Mouse hover renders only cursor + tooltip + active dots (= only the components that visually change, can't get better than this):
https://github.com/user-attachments/assets/efa99aab-c481-4f92-98f2-8f293e85aaae

Mouse click renders some outer layers of the example (we could improve this further). The most interesting part - the line itself - no longer re-renders.
https://github.com/user-attachments/assets/6d3a435f-2d54-4193-8c78-23c81d0a19cc

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My change requires a change to the documentation.
I have updated the documentation accordingly.
I have added tests to cover my changes.
I have added a storybook story or VR test, or extended an existing story or VR test to show my changes

codecov · 2025-09-15T03:37:35Z

Codecov Report

❌ Patch coverage is 96.26866% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 96.61%. Comparing base (6ab8bae) to head (e8ee540).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
src/state/selectors/axisSelectors.ts	87.09%	4 Missing ⚠️
src/cartesian/YAxis.tsx	96.96%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6315      +/-   ##
==========================================
- Coverage   96.63%   96.61%   -0.02%     
==========================================
  Files         221      221              
  Lines       20291    20329      +38     
  Branches     4157     4170      +13     
==========================================
+ Hits        19608    19641      +33     
- Misses        676      681       +5     
  Partials        7        7

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

codecov · 2025-09-15T03:37:54Z

Bundle Report

Changes will increase total bundle size by 1.17kB (0.05%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.05MB	894 bytes (0.09%) ⬆️
recharts/bundle-es6	902.77kB	729 bytes (0.08%) ⬆️
recharts/bundle-umd	487.88kB	-456 bytes (-0.09%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`state/selectors/axisSelectors.js`	462 bytes	59.52kB	0.78%
`cartesian/Area.js`	63 bytes	27.51kB	0.23%
`cartesian/Bar.js`	61 bytes	25.37kB	0.24%
`cartesian/Line.js`	63 bytes	24.87kB	0.25%
`cartesian/Scatter.js`	69 bytes	22.05kB	0.31%
`cartesian/YAxis.js`	146 bytes	9.18kB	1.62%
`cartesian/XAxis.js`	30 bytes	7.68kB	0.39%

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`state/selectors/axisSelectors.js`	484 bytes	50.05kB	0.98%
`cartesian/Area.js`	46 bytes	25.75kB	0.18%
`cartesian/Bar.js`	44 bytes	23.87kB	0.18%
`cartesian/Line.js`	46 bytes	23.4kB	0.2%
`cartesian/Scatter.js`	52 bytes	20.54kB	0.25%
`cartesian/YAxis.js`	85 bytes	7.92kB	1.08%
`cartesian/XAxis.js`	-28 bytes	6.49kB	-0.43%

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	-456 bytes	487.88kB	-0.09%

Copilot

Pull Request Overview

This PR focuses on performance optimization to reduce unnecessary re-renders in Recharts, specifically targeting the blinking line issue in the Zoom&Highlight story. The changes include adding React.memo to graphical components, optimizing axis selectors, and improving test infrastructure for performance testing.

React.memo optimization for graphical components and axes
Selector performance improvements with memoization
Enhanced test infrastructure for stability testing

Reviewed Changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
storybook/stories/Examples/LineChart/LineChart.stories.tsx	Optimized story with useCallback for event handlers
src/cartesian/*.tsx	Added React.memo to Line, Area, Bar, Scatter, XAxis, YAxis components
src/state/selectors/axisSelectors.ts	Memoized XAxis and YAxis position selectors
test/*/.spec.tsx	Added stability tests and updated test infrastructure
test/helper/*	Enhanced test utilities for performance and stability testing

Comments suppressed due to low confidence (1)

src/cartesian/XAxis.tsx:1

[nitpick] The variable xAxisDefaultProps should be exported to maintain consistency with the similar yAxisDefaultProps that is exported in YAxis.tsx, or follow a consistent naming pattern for internal/external usage.

/**

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot

Pull Request Overview

Copilot reviewed 29 out of 29 changed files in this pull request and generated no new comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

ckifer

Wish things didn't have to be this complicated in order to keep everything working correctly externally

But so it goes with the API that is defined

PavelVanecek added 2 commits September 15, 2025 12:15

Update Line test

404d633

Refactor chart components to use memoization and improve performance

e8ee540

PavelVanecek requested a review from Copilot September 15, 2025 03:39

Copilot AI reviewed Sep 15, 2025

View reviewed changes

PavelVanecek requested review from ckifer and Copilot September 15, 2025 03:40

Copilot AI reviewed Sep 15, 2025

View reviewed changes

ckifer approved these changes Sep 15, 2025

View reviewed changes

PavelVanecek merged commit 6edeb65 into main Sep 15, 2025
26 of 27 checks passed

PavelVanecek deleted the blinking-line branch September 15, 2025 08:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Reduce re-renders to fix blinking line in Zoom&Highlight story#6315

Reduce re-renders to fix blinking line in Zoom&Highlight story#6315
PavelVanecek merged 2 commits intomainfrom
blinking-line

PavelVanecek commented Sep 15, 2025 •

edited

Loading

Uh oh!

codecov bot commented Sep 15, 2025 •

edited

Loading

Uh oh!

codecov bot commented Sep 15, 2025

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

ckifer left a comment •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

PavelVanecek commented Sep 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Motivation and Context

Screenshots (if appropriate):

Before

After

Types of changes

Checklist:

Uh oh!

codecov bot commented Sep 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecov bot commented Sep 15, 2025

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

ckifer left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

PavelVanecek commented Sep 15, 2025 •

edited

Loading

codecov bot commented Sep 15, 2025 •

edited

Loading

ckifer left a comment •

edited

Loading