onScaleChange creates feedback loop

[Casey-Litmer]

I am trying to use onScaleChange to calculate new data when the user pans or scales the CartesianChart, much like how a graphing calculator plots points from a formula to its current domain.

The problem I am running in to is even when I debounce the callback, it triggers an infinite loop even when the incoming data has not changed its bounds:

// Calcuates new data from 'start' to 'end'
const getNewData = (start: number, end: number) => {/*formula*/}

const Plot = () => {
  const transformState = useChartTransformState({scaleX:1, scaleY:1});

  const [DATA, setDATA] = useState<Record<string, unknown>[]>([{}]);

  // Callback that runs on scale change and calculates new data in that range
  const newDataOnScaleChange = debounce(
    (xScale: ScaleLinear<number, number>, yScale: ScaleLinear<number, number>) => {

      const [newDataStart, newDataEnd] = xScale.domain();
      setDATA(getNewData(newDataStart, newDataEnd));

  }, 100);
  
  return (
    <CartesianChart
        data = {DATA}
        onScaleChange={newDataOnScaleChange}
        transformState={transformState.state}
        //...xKeys, yKeys, etc.
    />
        {/*children*/}
    </CartesianChart>
  )
}

It says clearly in the docs that onScaleChange runs when the scale changes OR when there is new data.

Is there any way to prevent the latter? I've been digging through the sources trying to see if there is some way to prevent new data from running the callback. I found the useEffect that runs the onScaleChange, but its dependencies are too complex to patch with a simple 'doNotRunOnNewData' condition.

Is there a better way to do this than with onScaleChange?

[keithluchtel]

@Casey-Litmer what version of victory-native-xl are you using? Looking at the useEffect that triggers the scale change callback, it looks like it does try to prevent calling the callback if that scale bounds haven't changed at all:

  React.useEffect(() => {
    const rescaledX = zoomX.rescaleX(xScale);
    const rescaledY = zoomY.rescaleY(primaryYScale);
    if (
      !isEqual(xScaleRef.current?.domain(), rescaledX.domain()) ||
      !isEqual(yScaleRef.current?.domain(), rescaledY.domain()) ||
      !isEqual(xScaleRef.current?.range(), rescaledX.range()) ||
      !isEqual(yScaleRef.current?.range(), rescaledY.range())
    ) {
      xScaleRef.current = xScale;
      yScaleRef.current = primaryYScale;
      onScaleRef.current?.(rescaledX, rescaledY);
    }
  }, [onScaleChange, onScaleRef, xScale, zoomX, zoomY, primaryYScale]);