How do I handle animations taking in high-frequency live input?

[EricHasegawa]

II'm working on an IoT product where users can record ECG's on a small device. This device connects via Bluetooth to a React native application that allows them to view past ECG's, and to watch their ECG graph appear live as they are taking them. For reference, an ECG graph looks like this:

Viewing past ECG's it works perfectly:

• Initialize an empty path in a state variable via Skia.Path.Make()).
• User loads in a past ECG, passing in an array of around ~15,000 numbers representing ECG movements.
• This loading triggers a useEffect in which I set up a new blank path.
• For each number in the passed array, I convert it to coordinates on our ECG graph, and connect the new path to that point.
• Once the new path is fully created, I set the original path in the state variable to this new path.

Despite this working really well, I'm having trouble allowing users to watch their ECG graphs as they are taking them. The high-level ask is this:

• The IoT device transmits the ECG data live at a rate of ~500 updates per second. Each update sends the full array of numbers over (which grows from 0 to 15,000 in about 30 seconds).
• We need to take these numbers in as they arrive, convert them to points, and use these points to create a live view of the ECG being taken.

I'm not sure how to do this using React-Native-Skia without making it unusable-y "choppy". The general problem I keep running into is that <Path> seems to mostly work with state variables, but state variables are immutable, so setting the whole path with such high frequency doesn't really work. I have tried:

• Doing it the same way as the static ECG graph, where it re-creates the whole graph ~500 times a second. This performs terribly, which is no surprise.
• Having an ecgPath variable that's not a state variable, then, in a useEffect that's triggered each time ecgData.length changes, I take the last number in the array (the one that's been added), convert it to a point, then add that to the path. This fails in that the variable gets reset at each re-render, and since the page has to re-render so often, the graph does not generate.

Is there any way I can just add one line at a time to the Path without needing to re-draw the whole thing or re-set the ecgPath state variable? Alternatively, is there any other techniques to handle drawing this path as input comes in?

p.s. I also posted this on StackOverflow here but I am more confident I can get a response here.

[javipascual]

Did you consider buffering the data and downsampling it to 60HZ (fps) or even less?

[wcandillon]

I can echo @javipascual comment: only add to the path data that would be visually different. Points that wouldn't modify the visual aspect of the path can be discarded.