LineChart can exceed maximum stack depth when responding to user gestures

[neon-john]

Description

Setting up a LineChart with pointerConfig causes responders to be activated, and if you have enough data points in your graph and swipe across fast enough without releasing, you can trigger the maximum update depth exception.

<LineChart
      data={data}
      height={GRAPH_HEIGHT}
      spacing={deviceWidth / (lastIndex || 1)}
      pointerConfig={{
        pointerLabelWidth: 0,
        pointerLabelHeight: 40,
        activatePointersOnLongPress: false,
        autoAdjustPointerLabelPosition: true,
        stripOverPointer: false,
      }}
      width={Dimensions.get("window").width}
    />

I tested with a change here:
https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/blob/master/src/LineChart/index.tsx#L1945
wrapping activatePointers in a startTransition, which stopped the problem from happening.

Steps to reproduce

Create a LineChart with ~365 data points and a pointer config.
Swipe back and forth quickly without releasing.

Snack or a link to a repository

No response

version of react-native-gifted-charts

1.4.70

React Native version

0.85.1

Platforms

iOS

Workflow

None

[Abhinandan-Kushwaha]

Thanks, @neon-john, for this wonderful suggestion. I will test it and add it in the next release.

[Yuri-Oliferchuk]

I have the same issue in v1.4.74.
The solution with wrapping activatePointers works in the sense that it stops the alert message, but it doesn’t solve the real problem. The JS thread drops to 0 while the gesture continues.

[e-n-0]

comments