fix stuck chart issue by Parth10P · Pull Request #6623 · recharts/recharts

Parth10P · 2025-11-13T14:46:07Z

Description

Reset the example editor state whenever I navigate to a different example so the sidebar keeps working after I hit Run.

Related Issue

fixes #6618

Motivation and Context

How Has This Been Tested?

Started the docs locally, reproduced the bug, then verified the sidebar loads new examples normally after clicking Run.

Screenshots (if appropriate):

Screen.Recording.2025-11-13.at.3.mp4

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

Summary by CodeRabbit

Bug Fixes
- Fixed component state handling when navigating between examples to ensure proper reset and clean state transitions.

coderabbitai · 2025-11-13T14:46:22Z

Walkthrough

Adds a key prop to the CodeEditorWithPreview component in the examples view, set to the current page value. This forces the component to remount when navigating between examples, resetting any internal state that may have prevented subsequent navigation.

Changes

Cohort / File(s)	Summary
Examples View Component Update `www/src/views/ExamplesView.tsx`	Added `key={page}` prop to `CodeEditorWithPreview` component to force remount on page changes and reset internal state

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

Switch code editor to codemirror #6531 — Modified the CodeEditorWithPreview component itself (codemirror switch), which directly relates to this key prop addition affecting component remounting behavior.

Suggested reviewers

ckifer

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix stuck chart issue' directly matches the linked issue #6618 describing sidebar navigation breaking after running chart code.
Description check	✅ Passed	The PR description includes all template sections: description, related issue (#6618), motivation/context, testing steps with local reproduction, screenshots, and change type checklist.
Linked Issues check	✅ Passed	The PR adds a key prop to CodeEditorWithPreview triggering remount on page changes, directly addressing #6618's requirement to restore sidebar navigation after running edited code.
Out of Scope Changes check	✅ Passed	The change is narrowly scoped to ExamplesView.tsx, adding only a key prop to force component remount—directly aligned with fixing sidebar navigation issues in #6618.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8f07a10 and 712c47d.

📒 Files selected for processing (1)

www/src/views/ExamplesView.tsx (1 hunks)

🔇 Additional comments (1)

www/src/views/ExamplesView.tsx (1)

54-54: LGTM! Clean fix using React's key prop pattern.

Adding key={page} forces the CodeEditorWithPreview component to fully remount when navigating between examples, which properly resets any internal state that was preventing subsequent navigation after clicking "Run". This is a standard React pattern and aligns with the suggestion from the PR comments.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

PavelVanecek · 2025-11-13T15:37:20Z

Would it also work if the whole thing had a key prop? That will clear all state, and we don't have to hunt for individual pieces.

codecov · 2025-11-13T15:46:26Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.15%. Comparing base (154ce28) to head (712c47d).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6623   +/-   ##
=======================================
  Coverage   94.14%   94.15%           
=======================================
  Files         493      493           
  Lines       41080    41104   +24     
  Branches     4777     4783    +6     
=======================================
+ Hits        38676    38700   +24     
  Misses       2399     2399           
  Partials        5        5

☔ 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.

Parth10P · 2025-11-13T16:41:18Z

Would it also work if the whole thing had a key prop? That will clear all state, and we don't have to hunt for individual pieces.

@PavelVanecek yes it works.. nicely, Thanks for your suggestion..

PavelVanecek

Why not key on the whole examples page? And all other pages too?

… same bug

… same bug (#6637) ## Description API and Guide pages were also affected by the same bug. ## Related Issue #6618  ## Summary by CodeRabbit ## Release Notes * **Bug Fixes** * Improved page navigation to properly reset component state when switching between pages, ensuring a fresh experience without residual data from previous pages.

GoldFoylee

I appreciate you taking care of this. By making sure the example component is remounted when navigating pages, the key={page} addition neatly resolves the stuck chart issue. Elegant, straightforward, and functional.
I think it looks good.

fix stuck chart issue

8f07a10

make changes key prop(to individual state)

712c47d

ckifer approved these changes Nov 13, 2025

View reviewed changes

PavelVanecek approved these changes Nov 13, 2025

View reviewed changes

ckifer merged commit c552294 into recharts:main Nov 14, 2025
22 checks passed

PavelVanecek added a commit that referenced this pull request Nov 16, 2025

Extend the key fix from #6623 to the other pages that suffer from the…

95d9afa

… same bug

coderabbitai bot mentioned this pull request Nov 16, 2025

Extend the key fix from https://github.com/recharts/recharts/pull/6623 to the other pages that suffer from the same bug #6637

Merged

GoldFoylee reviewed Dec 5, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix stuck chart issue#6623

fix stuck chart issue#6623
ckifer merged 2 commits intorecharts:mainfrom
Parth10P:page-navigation

Parth10P commented Nov 13, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 13, 2025 •

edited

Loading

Uh oh!

PavelVanecek commented Nov 13, 2025

Uh oh!

codecov bot commented Nov 13, 2025 •

edited

Loading

Uh oh!

Parth10P commented Nov 13, 2025 •

edited

Loading

Uh oh!

PavelVanecek left a comment

Uh oh!

Uh oh!

GoldFoylee left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

Parth10P commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

PavelVanecek commented Nov 13, 2025

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

Parth10P commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PavelVanecek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

GoldFoylee left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Parth10P commented Nov 13, 2025 •

edited

Loading

coderabbitai bot commented Nov 13, 2025 •

edited

Loading

codecov bot commented Nov 13, 2025 •

edited

Loading

Parth10P commented Nov 13, 2025 •

edited

Loading