Brush sometimes jumps around after releasing drag

[PatriceHerstix]

At my work, I had to create a graph using the Brush component. I noticed that after moving the selection, it slides to a different place than it should. Most of the time it's not noticeable, but occasionally there's a noticeable jump.

I have successfully reproduced this bug in the demo of the brush, as can be seen in the video below:

2023-07-27.17-37-37.mp4

[LlewynWan]

I ran into a similar issue lately. I was updating positions (react hooks) of draggable components in an onDragEnd event, which should cause a re-rendering. However, I found that the dx and dy fed to useDrag function did not update until the positions changed. It means that dx & dy were only reset to 0 after a re-rendering took place.
I haven't checked the source code, but with the documentation alone, I can't say whether it's a bug or intended behaviour. I think the onDragEnd should be a callback after everything's reset?

[JeanBaptisteBolh]

I haven't looked under the hood or anything... but this jumpy behavior goes away by adding a delay (with debounce) to the onChange function of the Brush component.

This does come at the cost of not having a smooth re-render of the chart while you are moving the brush around:

import { debounce } from "lodash";

const onBrushChange = debounce((domain: Bounds | null) => {
    // ... other logic to 
    setFilteredData(newData);  // update the data displayed
  }, 150);
  
  ...
  
<Brush
    // other props
    onChange={onBrushChange}
/>

[abhinaynference]

I have added the debounce but facing an issue : on leaving the handle my min and max values are increased by certain amount

[hshoff]

Fixed in #1836. Released in @visx/brush@3.10.4