Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Large data set animation lag

See original GitHub issue

Issue Description

The line chart starts to drop some frames if the data set gets large on iOS. Under 45 items never drops frames. Under 55 is pretty reliable, but occasionally will. Once you get over 70, it’s consistently dropping frames on the UI thread when animating. I wonder if there could be optimizations for this.

Possible ideas:

Investigate the fastest way to do a for loop, since we’re looping through lots of data (for (let i = 0) vs .map)
Could we turn the data array into a shared value under the hood?
Since parse(path) gets used in a few places, maybe we should offload that to the provider to reduce the number of times it gets calculated.
Fork the redash helpers and try to optimize them if possible.

These are just a few off-hand ideas. I would have to do more digging.

Issue Analytics

State:
Created a year ago
Reactions:2
Comments:8 (8 by maintainers)

Top GitHub Comments

1reaction

nandorojocommented, Nov 16, 2021

Relevant: https://github.com/software-mansion/react-native-reanimated/issues/1302

Also: https://github.com/sbycrosz/d3-interpolate-path/tree/feat/react-native-reanimated-support

1reaction

jxomcommented, Nov 15, 2021

Been investigating making data a shared value under the hood. Seems like this problem is really not trivial as reanimated doesn’t really have first-class support for external library imports. We would probably have to find a way to convert libraries such as d3-scale and d3-shape to be worklet compatible. Will probably need a bit more time to look into this one.