Brush component ignores passed startIndex / endIndex params in Charts with syncId

[snelsi]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Top and bottom charts are synced.
Drag the top (blue) brush to change its range:

New startIndex / endIndex params are saved in the state and passed to the bottom (green) brush component.
Even though new startIndex / endIndex params are passed, nothing happens.
The previous range is still displayed on the bottom (green) brush.

What is expected?

All brushes in synced charts need to be updated when one of them changes.

Or make sure that Brush component respects passed startIndex / endIndex params and updates when startIndex or endIndex changes

What is actually happening?

startIndex / endIndex values are ignored. Previous range is displayed in the second brush. Brushes are out of sync.

Environment	Info
Recharts	v2.11
React	18.2.0
System	Windows 11
Browser	Chrome 121

---

Related:
#3027

[ckifer]

Thanks for this, will look when I get a chance

[ckifer]

Okay so my recent change to fix this fixed a partial problem but not all of it.

Here if you update the indices via inputs, everything updates correctly. However if you update state via the onChange function, the chart updates but the Brush does not. Suspect its a simple fix somewhere in the same place as #4034

Feel free to submit a PR, otherwise I'll take this when I can

[ckifer]

this is unfortunately more daunting than meets the eye, not a good first issue. You can semi-fix the problem by always incrementing updateId here https://github.com/recharts/recharts/pull/4034/files#diff-aa1b4fbed632e1bdab786e0521346d3a1a2386c633f22f5778d4bcbc47581a65R1292 but that adds more issues than it solves.

[ckifer]

I could "fix" this, but it breaks draggability of the Brush handles because of too many re-renders

synced-brush-issue-recharts.mov