Combining Brush and XYChart

[mira-t]

Hi! I am really enjoying using visx and have a question about best practice for combining time series line charts with a brush.

I based my solution on the Brush example (https://airbnb.io/visx/brush) and replaced the AreaChart with an XYChart and replaced the bottom AreaChart (the one for the brush) with LinePaths.

XYChart's xScale and yScale props have different types, so I changed it to provide xScale={{ type: 'utc' }} and yScale={{ type: 'linear' }}. However, this seems has a negative impact on performance (the dragging of the brush and handles is not as smooth as the example). I suspect this is because it is no longer using the memoized scales like the example. My code only uses memoized scales for the brush and does not use animated components.

Is there a way to use React.useMemo() on XYChart scales or should I just use different components? I am not sure what the best practice is here, I would like to make the chart updates and brush drag smoother.