react-native-livechart 4.10.0 → 4.11.0

package/src/components/MultiSeriesValueLines.tsx

@@ -1,7 +1,6 @@
 import { DashPathEffect, Group, Path } from "@shopify/react-native-skia";
 
 import { useDerivedValue } from "react-native-reanimated";
-import { MAX_MULTI_SERIES } from "../constants";
 import type { ChartPadding } from "../draw/line";
 import type { ResolvedValueLineConfig } from "../core/resolveConfig";
 import type { MultiEngineState } from "../core/useLiveChartEngine";
@@ -72,15 +71,18 @@ export function MultiSeriesValueLines({
   padding,
   colors,
   config,
+  seriesCount,
 }: {
   engine: MultiEngineState;
   padding: ChartPadding;
   colors: string[];
   config: ResolvedValueLineConfig;
+  /** Number of live series slots to mount. */
+  seriesCount: number;
 }) {
   return (
     <Group>
-      {Array.from({ length: MAX_MULTI_SERIES }, (_, i) => (
+      {Array.from({ length: seriesCount }, (_, i) => (
         <SeriesValueLineAtIndex
           key={i}
           index={i}

package/src/components/ThresholdSplitShader.tsx

@@ -2,6 +2,7 @@ import { Shader, Skia, type Uniforms } from "@shopify/react-native-skia";
 import type { SharedValue } from "react-native-reanimated";
 
 import { THRESHOLD_SAMPLE_COUNT } from "../math/threshold";
+import { buildThresholdSplitShaderSource } from "./thresholdSplitShaderSource";
 
 /**
  * Per-fragment split shader for a *time-varying* threshold. For each fragment it
@@ -15,49 +16,16 @@ import { THRESHOLD_SAMPLE_COUNT } from "../math/threshold";
  * alpha-reduced colors). Output is premultiplied — Skia's shader convention, as in
  * `AreaDotsOverlay`. One GPU draw, no per-frame clip / `saveLayer`.
  */
-const SPLIT_SKSL = `
-// Pixel-X span of the sample grid (thresholdSampleSpanX) — overhangs the plot
-// and glides with the window so features move fluidly, frame to frame.
-uniform float sampleLeft;
-uniform float sampleRight;
-// X where the threshold ends (extendToNow: false → the last point's pixel-X,
-// else a huge sentinel). Fragments right of it paint restColor: the plain line
-// color for the stroke, transparent for the band.
-uniform float clipRight;
-uniform vec4 aboveColor; // straight-alpha rgba, 0..1
-uniform vec4 belowColor; // straight-alpha rgba, 0..1
-uniform vec4 restColor;  // straight-alpha rgba, 0..1
-uniform float samples[${THRESHOLD_SAMPLE_COUNT}];
-
-half4 main(vec2 xy) {
-  if (xy.x > clipRight) {
-    return half4(half3(restColor.rgb) * restColor.a, restColor.a);
-  }
-  float span = sampleRight - sampleLeft;
-  float u = span > 0.0 ? (xy.x - sampleLeft) / span : 0.0;
-  u = clamp(u, 0.0, 1.0) * float(${THRESHOLD_SAMPLE_COUNT - 1});
-  // SkSL forbids indexing a uniform array with a non-constant index, so walk the
-  // segments in an unrolled, constant-bound loop — the index is the loop variable
-  // (a compile-time constant per unrolled iteration) — and keep the last segment
-  // whose left edge is at or before the fragment's u.
-  float thrY = samples[0];
-  for (int j = 0; j < ${THRESHOLD_SAMPLE_COUNT - 1}; j++) {
-    if (u >= float(j)) {
-      thrY = mix(samples[j], samples[j + 1], clamp(u - float(j), 0.0, 1.0));
-    }
-  }
-  // 1 above the boundary, 0 below, with ~1px antialiasing across it.
-  float above = clamp(thrY - xy.y + 0.5, 0.0, 1.0);
-  vec4 c = mix(belowColor, aboveColor, above);
-  return half4(half3(c.rgb) * c.a, c.a);
-}`;
+const THRESHOLD_SPLIT_SKSL = buildThresholdSplitShaderSource(
+  THRESHOLD_SAMPLE_COUNT,
+);
 
 // Compiled once. `RuntimeEffect.Make` THROWS on a compile error, so guard it —
 // a shader failure must degrade to "no split" (the line keeps its plain color),
 // never crash every chart screen at import. Null → the component no-ops.
 let SPLIT_EFFECT: ReturnType<typeof Skia.RuntimeEffect.Make> = null;
 try {
-  SPLIT_EFFECT = Skia.RuntimeEffect.Make(SPLIT_SKSL);
+  SPLIT_EFFECT = Skia.RuntimeEffect.Make(THRESHOLD_SPLIT_SKSL);
 } catch {
   SPLIT_EFFECT = null;
 }

package/src/components/thresholdSplitShaderSource.ts

@@ -0,0 +1,70 @@
+/**
+ * Build a balanced constant-index lookup for the threshold sample array.
+ *
+ * SkSL does not allow a runtime value to index a uniform array. A linear loop
+ * works around that restriction, but makes every covered fragment visit every
+ * segment. This tree keeps every array index constant while selecting the same
+ * segment in at most `ceil(log2(sampleCount - 1))` comparisons (six for the
+ * production 64-sample shader).
+ */
+export function buildThresholdLookupTree(sampleCount: number): string {
+  if (!Number.isInteger(sampleCount) || sampleCount < 2) {
+    throw new Error("Threshold shader needs at least two samples");
+  }
+
+  const build = (first: number, end: number, indent: string): string => {
+    if (end - first === 1) {
+      return `${indent}return mix(samples[${first}], samples[${first + 1}], clamp(u - float(${first}), 0.0, 1.0));`;
+    }
+
+    const middle = Math.floor((first + end) / 2);
+    const childIndent = `${indent}  `;
+    return `${indent}if (u < float(${middle})) {
+${build(first, middle, childIndent)}
+${indent}} else {
+${build(middle, end, childIndent)}
+${indent}}`;
+  };
+
+  return build(0, sampleCount - 1, "  ");
+}
+
+/** Build the complete time-varying threshold split shader. */
+export function buildThresholdSplitShaderSource(sampleCount: number): string {
+  const lookup = buildThresholdLookupTree(sampleCount);
+  return `
+// Pixel-X span of the sample grid (thresholdSampleSpanX) — overhangs the plot
+// and glides with the window so features move fluidly, frame to frame.
+uniform float sampleLeft;
+uniform float sampleRight;
+// X where the threshold ends (extendToNow: false → the last point's pixel-X,
+// else a huge sentinel). Fragments right of it paint restColor: the plain line
+// color for the stroke, transparent for the band.
+uniform float clipRight;
+uniform vec4 aboveColor; // straight-alpha rgba, 0..1
+uniform vec4 belowColor; // straight-alpha rgba, 0..1
+uniform vec4 restColor;  // straight-alpha rgba, 0..1
+uniform float samples[${sampleCount}];
+
+float thresholdAt(float u) {
+${lookup}
+}
+
+half4 main(vec2 xy) {
+  if (xy.x > clipRight) {
+    return half4(half3(restColor.rgb) * restColor.a, restColor.a);
+  }
+  float span = sampleRight - sampleLeft;
+  float u = span > 0.0 ? (xy.x - sampleLeft) / span : 0.0;
+  u = clamp(u, 0.0, 1.0) * float(${sampleCount - 1});
+  // Uniform-array indices must stay compile-time constants in SkSL. The
+  // generated branch tree selects the same segment as floor(u), including the
+  // clamped final endpoint, in logarithmic comparisons instead of walking every
+  // segment for every fragment.
+  float thrY = thresholdAt(u);
+  // 1 above the boundary, 0 below, with ~1px antialiasing across it.
+  float above = clamp(thrY - xy.y + 0.5, 0.0, 1.0);
+  vec4 c = mix(belowColor, aboveColor, above);
+  return half4(half3(c.rgb) * c.a, c.a);
+}`;
+}

package/src/core/useLiveChartEngine.ts

@@ -18,7 +18,11 @@ import {
 } from "react-native-reanimated";
 import { MS_PER_FRAME_60FPS, RETURN_TO_LIVE_MS } from "../constants";
 import type { CandlePoint, LiveChartPoint, SeriesConfig } from "../types";
-import { tickLiveChartEngineFrame } from "./liveChartEngineTick";
+import {
+  tickLiveChartEngineFrame,
+  type EngineTickInput,
+  type EngineTickMutable,
+} from "./liveChartEngineTick";
 
 export interface EngineConfig {
   data: SharedValue<LiveChartPoint[]>;
@@ -229,6 +233,42 @@ export interface EngineFrameRefs {
   extremaMaxTime: SharedValue<number>;
 }
 
+/** Stable state/input containers reused by the UI-thread frame callback. */
+export interface EngineFrameScratch {
+  state: EngineTickMutable;
+  input: EngineTickInput;
+}
+
+/** Allocate one single-series frame scratch. Call once per engine instance. */
+export function makeEngineFrameScratch(): EngineFrameScratch {
+  return {
+    state: {
+      displayValue: 0,
+      displayMin: 0,
+      displayMax: 1,
+      displayWindow: 0,
+      timestamp: 0,
+      liveEdge: 0,
+      edgeValue: 0,
+      extremaMinValue: NaN,
+      extremaMaxValue: NaN,
+      extremaMinTime: NaN,
+      extremaMaxTime: NaN,
+    },
+    input: {
+      dt: MS_PER_FRAME_60FPS,
+      canvasWidth: 0,
+      canvasHeight: 0,
+      timeWindow: 0,
+      smoothing: 0,
+      exaggerate: false,
+      referenceValue: undefined,
+      targetValue: 0,
+      points: [],
+    },
+  };
+}
+
 /**
  * Shared between the `useFrameCallback` worklet and unit tests.
  * Mutates shared values from a snapshot tick (`tickLiveChartEngineFrame`).
@@ -236,54 +276,77 @@ export interface EngineFrameRefs {
 export function applyLiveChartEngineFrame(
   frameInfo: { timeSincePreviousFrame?: number | null },
   sv: EngineFrameRefs,
+  scratch?: EngineFrameScratch,
 ): void {
   "worklet";
   const dt = frameInfo.timeSincePreviousFrame ?? MS_PER_FRAME_60FPS;
   // One-shot settle: a `snapKey` change set this flag; consume it for this tick
   // and clear it below so only this frame snaps (live ticks stay smoothed).
   const snap = sv.snapSV?.value ?? false;
-  const state = {
-    displayValue: sv.displayValue.value,
-    displayMin: sv.displayMin.value,
-    displayMax: sv.displayMax.value,
-    displayWindow: sv.displayWindow.value,
-    timestamp: sv.timestamp.value,
-    liveEdge: sv.liveEdgeSV?.value ?? 0,
-    edgeValue: sv.edgeValueSV?.value ?? 0,
-    extremaMinValue: sv.extremaMinValue.value,
-    extremaMaxValue: sv.extremaMaxValue.value,
-    extremaMinTime: sv.extremaMinTime.value,
-    extremaMaxTime: sv.extremaMaxTime.value,
+  const state: EngineTickMutable = scratch?.state ?? {
+    displayValue: 0,
+    displayMin: 0,
+    displayMax: 1,
+    displayWindow: 0,
+    timestamp: 0,
+    liveEdge: 0,
+    edgeValue: 0,
+    extremaMinValue: NaN,
+    extremaMaxValue: NaN,
+    extremaMinTime: NaN,
+    extremaMaxTime: NaN,
   };
-  tickLiveChartEngineFrame(state, {
+  state.displayValue = sv.displayValue.value;
+  state.displayMin = sv.displayMin.value;
+  state.displayMax = sv.displayMax.value;
+  state.displayWindow = sv.displayWindow.value;
+  state.timestamp = sv.timestamp.value;
+  state.liveEdge = sv.liveEdgeSV?.value ?? 0;
+  state.edgeValue = sv.edgeValueSV?.value ?? 0;
+  state.extremaMinValue = sv.extremaMinValue.value;
+  state.extremaMaxValue = sv.extremaMaxValue.value;
+  state.extremaMinTime = sv.extremaMinTime.value;
+  state.extremaMaxTime = sv.extremaMaxTime.value;
+
+  const input: EngineTickInput = scratch?.input ?? {
     dt,
-    canvasWidth: sv.canvasWidth.value,
-    canvasHeight: sv.canvasHeight.value,
-    timeWindow: sv.timeWindow.value,
-    smoothing: sv.smoothing.value,
-    adaptiveSpeedBoost: sv.adaptiveSpeedBoostSV?.value,
-    exaggerate: sv.exaggerateSV.value,
-    referenceValue: sv.referenceValue.value,
-    referenceValues: sv.referenceValues?.value,
-    thresholdRangePoints: sv.thresholdRangePoints?.value,
-    thresholdRangeExtendToNow: sv.thresholdRangeExtendToNow?.value ?? true,
-    nonNegative: sv.nonNegativeSV?.value ?? false,
-    maxValue: sv.maxValueSV?.value,
-    nowOverride: sv.nowOverrideSV?.value,
-    windowBuffer: sv.windowBufferSV?.value ?? 0,
-    targetValue: sv.value.value,
-    points: sv.data.value,
-    nowSeconds: Date.now() / 1000,
-    paused: sv.pausedSV.value,
-    snap,
-    viewEnd: sv.viewEndSV?.value,
-    returnT: sv.returnTSV?.value,
-    returnFrom: sv.returnFromSV?.value,
-    viewWindow: sv.viewWindowSV?.value,
-    mode: sv.modeSV.value,
-    candles: sv.candles?.value,
-    liveCandle: sv.liveCandle?.value,
-  });
+    canvasWidth: 0,
+    canvasHeight: 0,
+    timeWindow: 0,
+    smoothing: 0,
+    exaggerate: false,
+    referenceValue: undefined,
+    targetValue: 0,
+    points: [],
+  };
+  input.dt = dt;
+  input.canvasWidth = sv.canvasWidth.value;
+  input.canvasHeight = sv.canvasHeight.value;
+  input.timeWindow = sv.timeWindow.value;
+  input.smoothing = sv.smoothing.value;
+  input.adaptiveSpeedBoost = sv.adaptiveSpeedBoostSV?.value;
+  input.exaggerate = sv.exaggerateSV.value;
+  input.referenceValue = sv.referenceValue.value;
+  input.referenceValues = sv.referenceValues?.value;
+  input.thresholdRangePoints = sv.thresholdRangePoints?.value;
+  input.thresholdRangeExtendToNow = sv.thresholdRangeExtendToNow?.value ?? true;
+  input.nonNegative = sv.nonNegativeSV?.value ?? false;
+  input.maxValue = sv.maxValueSV?.value;
+  input.nowOverride = sv.nowOverrideSV?.value;
+  input.windowBuffer = sv.windowBufferSV?.value ?? 0;
+  input.targetValue = sv.value.value;
+  input.points = sv.data.value;
+  input.nowSeconds = Date.now() / 1000;
+  input.paused = sv.pausedSV.value;
+  input.snap = snap;
+  input.viewEnd = sv.viewEndSV?.value;
+  input.returnT = sv.returnTSV?.value;
+  input.returnFrom = sv.returnFromSV?.value;
+  input.viewWindow = sv.viewWindowSV?.value;
+  input.mode = sv.modeSV.value;
+  input.candles = sv.candles?.value;
+  input.liveCandle = sv.liveCandle?.value;
+  tickLiveChartEngineFrame(state, input);
   sv.displayValue.value = state.displayValue;
   sv.displayMin.value = state.displayMin;
   sv.displayMax.value = state.displayMax;
@@ -467,12 +530,16 @@ export function useLiveChartEngine(
     extremaMinTime,
     extremaMaxTime,
   };
+  const frameScratchRef = useRef<EngineFrameScratch | null>(null);
+  if (frameScratchRef.current === null) {
+    frameScratchRef.current = makeEngineFrameScratch();
+  }
 
   // `autostart=false` registers the frame callback without running it — the live
   // loop is fully inert in static mode (the invariant that makes this worth it).
   useFrameCallback((frameInfo) => {
     "worklet";
-    applyLiveChartEngineFrame(frameInfo, frameRefs);
+    applyLiveChartEngineFrame(frameInfo, frameRefs, frameScratchRef.current!);
   }, !config.static);
 
   // When time-scroll is disabled while scrolled back, return the window to the
@@ -532,6 +599,7 @@ export function useLiveChartEngine(
       applyLiveChartEngineFrame(
         { timeSincePreviousFrame: MS_PER_FRAME_60FPS },
         frameRefs,
+        frameScratchRef.current!,
       );
     },
   );

package/src/core/useLiveChartSeriesEngine.ts

@@ -11,7 +11,11 @@ import {
 } from "react-native-reanimated";
 import { MS_PER_FRAME_60FPS, RETURN_TO_LIVE_MS } from "../constants";
 import type { LiveChartPoint, SeriesConfig } from "../types";
-import { tickLiveChartSeriesEngineFrame } from "./liveChartSeriesEngineTick";
+import {
+  tickLiveChartSeriesEngineFrame,
+  type MultiEngineTickInput,
+  type MultiEngineTickMutable,
+} from "./liveChartSeriesEngineTick";
 import type { ChartEngineScroll, MultiEngineState } from "./useLiveChartEngine";
 
 export interface MultiSeriesEngineConfig {
@@ -94,10 +98,10 @@ export interface MultiEngineFrameRefs {
 }
 
 /**
- * Reusable per-frame scratch for {@link applyLiveChartSeriesEngineFrame}. The two
+ * Reusable per-frame scratch for {@link applyLiveChartSeriesEngineFrame}. The
  * output arrays ping-pong so the assigned reference still changes each frame
- * (Reanimated propagates on reference change) without allocating a fresh array
- * per frame. Create one per engine (the React Compiler keeps it stable).
+ * (Reanimated propagates on reference change), while the state/input containers
+ * are mutated in place. Create one per engine.
  */
 export interface MultiSeriesEngineScratch {
   dvA: number[];
@@ -105,6 +109,46 @@ export interface MultiSeriesEngineScratch {
   opA: number[];
   opB: number[];
   tick: boolean;
+  state: MultiEngineTickMutable;
+  input: MultiEngineTickInput;
+}
+
+/** Allocate one multi-series frame scratch. Call once per engine instance. */
+export function makeMultiSeriesEngineScratch(): MultiSeriesEngineScratch {
+  const dvA: number[] = [];
+  const dvB: number[] = [];
+  const opA: number[] = [];
+  const opB: number[] = [];
+  return {
+    dvA,
+    dvB,
+    opA,
+    opB,
+    tick: false,
+    state: {
+      displayMin: 0,
+      displayMax: 1,
+      displayWindow: 0,
+      timestamp: 0,
+      liveEdge: 0,
+      displayValues: dvA,
+      opacities: opA,
+      extremaMinValue: NaN,
+      extremaMaxValue: NaN,
+      extremaMinTime: NaN,
+      extremaMaxTime: NaN,
+    },
+    input: {
+      dt: MS_PER_FRAME_60FPS,
+      canvasWidth: 0,
+      canvasHeight: 0,
+      timeWindow: 0,
+      smoothing: 0,
+      exaggerate: false,
+      referenceValue: undefined,
+      series: [],
+    },
+  };
 }
 
 /**
@@ -113,8 +157,8 @@ export interface MultiSeriesEngineScratch {
  * to lerp per-series display values and opacities. Extracted as a
  * pure function so it can be called from both `useFrameCallback` and tests.
  *
- * Pass `scratch` to reuse the output arrays across frames instead of allocating
- * two via `.slice()` each frame; omit it (tests) to fall back to allocation.
+ * Pass `scratch` to reuse the output arrays plus state/input containers across
+ * frames; omit it (tests) to retain the standalone allocation fallback.
  */
 export function applyLiveChartSeriesEngineFrame(
   frameInfo: { timeSincePreviousFrame?: number | null },
@@ -143,42 +187,63 @@ export function applyLiveChartSeriesEngineFrame(
     displayValues = curDv.slice();
     opacities = curOp.slice();
   }
-  const state = {
-    displayMin: sv.displayMin.value,
-    displayMax: sv.displayMax.value,
-    displayWindow: sv.displayWindow.value,
-    timestamp: sv.timestamp.value,
-    liveEdge: sv.liveEdgeSV?.value ?? 0,
+  const state: MultiEngineTickMutable = scratch?.state ?? {
+    displayMin: 0,
+    displayMax: 1,
+    displayWindow: 0,
+    timestamp: 0,
+    liveEdge: 0,
     displayValues,
     opacities,
-    extremaMinValue: sv.extremaMinValue.value,
-    extremaMaxValue: sv.extremaMaxValue.value,
-    extremaMinTime: sv.extremaMinTime.value,
-    extremaMaxTime: sv.extremaMaxTime.value,
+    extremaMinValue: NaN,
+    extremaMaxValue: NaN,
+    extremaMinTime: NaN,
+    extremaMaxTime: NaN,
   };
-  tickLiveChartSeriesEngineFrame(state, {
+  state.displayMin = sv.displayMin.value;
+  state.displayMax = sv.displayMax.value;
+  state.displayWindow = sv.displayWindow.value;
+  state.timestamp = sv.timestamp.value;
+  state.liveEdge = sv.liveEdgeSV?.value ?? 0;
+  state.displayValues = displayValues;
+  state.opacities = opacities;
+  state.extremaMinValue = sv.extremaMinValue.value;
+  state.extremaMaxValue = sv.extremaMaxValue.value;
+  state.extremaMinTime = sv.extremaMinTime.value;
+  state.extremaMaxTime = sv.extremaMaxTime.value;
+
+  const input: MultiEngineTickInput = scratch?.input ?? {
     dt,
-    canvasWidth: sv.canvasWidth.value,
-    canvasHeight: sv.canvasHeight.value,
-    timeWindow: sv.timeWindow.value,
-    smoothing: sv.smoothing.value,
-    adaptiveSpeedBoost: sv.adaptiveSpeedBoostSV?.value,
-    exaggerate: sv.exaggerateSV.value,
-    referenceValue: sv.referenceValue.value,
-    referenceValues: sv.referenceValues?.value,
-    nonNegative: sv.nonNegativeSV?.value ?? false,
-    maxValue: sv.maxValueSV?.value,
-    nowOverride: sv.nowOverrideSV?.value,
-    windowBuffer: sv.windowBufferSV?.value ?? 0,
+    canvasWidth: 0,
+    canvasHeight: 0,
+    timeWindow: 0,
+    smoothing: 0,
+    exaggerate: false,
+    referenceValue: undefined,
     series: seriesSnap,
-    nowSeconds: Date.now() / 1000,
-    paused: sv.pausedSV.value,
-    snap,
-    viewEnd: sv.viewEndSV?.value,
-    returnT: sv.returnTSV?.value,
-    returnFrom: sv.returnFromSV?.value,
-    viewWindow: sv.viewWindowSV?.value,
-  });
+  };
+  input.dt = dt;
+  input.canvasWidth = sv.canvasWidth.value;
+  input.canvasHeight = sv.canvasHeight.value;
+  input.timeWindow = sv.timeWindow.value;
+  input.smoothing = sv.smoothing.value;
+  input.adaptiveSpeedBoost = sv.adaptiveSpeedBoostSV?.value;
+  input.exaggerate = sv.exaggerateSV.value;
+  input.referenceValue = sv.referenceValue.value;
+  input.referenceValues = sv.referenceValues?.value;
+  input.nonNegative = sv.nonNegativeSV?.value ?? false;
+  input.maxValue = sv.maxValueSV?.value;
+  input.nowOverride = sv.nowOverrideSV?.value;
+  input.windowBuffer = sv.windowBufferSV?.value ?? 0;
+  input.series = seriesSnap;
+  input.nowSeconds = Date.now() / 1000;
+  input.paused = sv.pausedSV.value;
+  input.snap = snap;
+  input.viewEnd = sv.viewEndSV?.value;
+  input.returnT = sv.returnTSV?.value;
+  input.returnFrom = sv.returnFromSV?.value;
+  input.viewWindow = sv.viewWindowSV?.value;
+  tickLiveChartSeriesEngineFrame(state, input);
   sv.displayMin.value = state.displayMin;
   sv.displayMax.value = state.displayMax;
   sv.displayWindow.value = state.displayWindow;
@@ -272,46 +337,48 @@ export function useLiveChartSeriesEngine(
   // Reused per-frame output buffers (ping-ponged) — see applyLiveChartSeriesEngineFrame.
   const scratchRef = useRef<MultiSeriesEngineScratch | null>(null);
   if (scratchRef.current === null) {
-    scratchRef.current = { dvA: [], dvB: [], opA: [], opB: [], tick: false };
+    scratchRef.current = makeMultiSeriesEngineScratch();
   }
 
+  const frameRefs: MultiEngineFrameRefs = {
+    series,
+    displaySeriesValues,
+    seriesOpacities,
+    displayMin,
+    displayMax,
+    displayWindow,
+    timestamp,
+    canvasWidth,
+    canvasHeight,
+    timeWindow,
+    smoothing,
+    adaptiveSpeedBoostSV,
+    exaggerateSV,
+    referenceValue,
+    referenceValues,
+    nonNegativeSV,
+    maxValueSV,
+    nowOverrideSV,
+    windowBufferSV,
+    pausedSV,
+    viewEndSV: viewEnd,
+    returnTSV: returnT,
+    returnFromSV: returnFrom,
+    viewWindowSV: viewWindow,
+    liveEdgeSV: liveEdge,
+    snapSV,
+    extremaMinValue,
+    extremaMaxValue,
+    extremaMinTime,
+    extremaMaxTime,
+  };
+
   useFrameCallback((frameInfo) => {
     "worklet";
     const scratch = scratchRef.current!;
     applyLiveChartSeriesEngineFrame(
       frameInfo,
-      {
-        series,
-        displaySeriesValues,
-        seriesOpacities,
-        displayMin,
-        displayMax,
-        displayWindow,
-        timestamp,
-        canvasWidth,
-        canvasHeight,
-        timeWindow,
-        smoothing,
-        adaptiveSpeedBoostSV,
-        exaggerateSV,
-        referenceValue,
-        referenceValues,
-        nonNegativeSV,
-        maxValueSV,
-        nowOverrideSV,
-        windowBufferSV,
-        pausedSV,
-        viewEndSV: viewEnd,
-        returnTSV: returnT,
-        returnFromSV: returnFrom,
-        viewWindowSV: viewWindow,
-        liveEdgeSV: liveEdge,
-        snapSV,
-        extremaMinValue,
-        extremaMaxValue,
-        extremaMinTime,
-        extremaMaxTime,
-      },
+      frameRefs,
       scratch,
     );
   });

package/src/draw/particleAtlas.ts

@@ -62,7 +62,8 @@ export interface ParticleInstance {
  *   scale = r / spriteRadius
  *   alpha = life * particleOpacity
  * Inactive (active <= 0.5), pre-spawn (dt < 0) and fully-faded (life <= 0)
- * slots are skipped.
+ * slots are skipped. Pass distinct `out` and `pool` arrays to retain inactive
+ * instance objects for later bursts while returning only the active prefix.
  */
 export function buildParticleInstances(
   buf: Float64Array,
@@ -71,9 +72,13 @@ export function buildParticleInstances(
   burstDur: number,
   particleOpacity: number,
   spriteRadius: number,
+  out?: ParticleInstance[],
+  pool?: ParticleInstance[],
 ): ParticleInstance[] {
   "worklet";
-  const out: ParticleInstance[] = [];
+  const target = out ?? [];
+  const instances = pool ?? target;
+  let count = 0;
   for (let i = 0; i < slots; i++) {
     const base = i * DEGEN_STRIDE;
     if (!(buf[base + 5] > 0.5)) continue;
@@ -83,13 +88,19 @@ export function buildParticleInstances(
     if (life <= 0) continue;
     const size = buf[base + 6] || 1;
     const r = size * (0.5 + life * 0.5);
-    out.push({
-      x: buf[base + 0],
-      y: buf[base + 1],
-      scale: r / spriteRadius,
-      alpha: life * particleOpacity,
-      colorIndex: Math.max(0, Math.floor(buf[base + 7])),
-    });
+    let instance = instances[count];
+    if (!instance) {
+      instance = { x: 0, y: 0, scale: 0, alpha: 0, colorIndex: 0 };
+      instances[count] = instance;
+    }
+    instance.x = buf[base + 0];
+    instance.y = buf[base + 1];
+    instance.scale = r / spriteRadius;
+    instance.alpha = life * particleOpacity;
+    instance.colorIndex = Math.max(0, Math.floor(buf[base + 7]));
+    target[count] = instance;
+    count += 1;
   }
-  return out;
+  target.length = count;
+  return target;
 }