solid-recharts 0.1.0 → 0.2.1

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2026 Thomas Guehenneux
+
+Portions derived from recharts (https://github.com/recharts/recharts),
+Copyright (c) 2015 recharts, released under the MIT License.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,23 +1,26 @@
 {
   "name": "solid-recharts",
-  "version": "0.1.0",
+  "version": "0.2.1",
+  "license": "MIT",
   "type": "module",
   "sideEffects": false,
   "exports": {
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "tiny-invariant": "^1.3.3",
-    "victory-vendor": "^37.0.2"
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.1.0"
   },
   "devDependencies": {
+    "@solidjs/testing-library": "^1.0.0-beta.2",
+    "@types/d3-scale": "^4.0.2",
+    "@types/d3-shape": "^3.1.0",
     "axe-core": "^4.12.0",
-    "vitest-axe": "^0.1.0",
-    "@solid-recharts/testing-library": "0.0.0"
+    "vitest-axe": "^0.1.0"
   },
   "peerDependencies": {
-    "@solidjs/web": "^2.0.0-beta.14",
-    "solid-js": "^2.0.0-beta.14"
+    "@solidjs/web": "^2.0.0-beta.17",
+    "solid-js": "^2.0.0-beta.17"
   },
   "scripts": {
     "pretest": "node ../../scripts/verify-reference.mjs",

package/src/cartesian/Area.tsx

@@ -11,10 +11,14 @@
 // registration components → `createEffect` add/replace + `onCleanup` (Line idiom);
 // React `useRef` prev-frame state → plain `{ current }` MutableRef objects driven
 // by AnimatedItems/useAnimationStartSnapshot.
-import { createEffect, createMemo, createSignal, merge, Show } from "solid-js";
+import { createMemo, merge, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { useAppSelector, useAppStore } from "../state/hooks";
-import { AnimatedItems, type AnimationInterpolateFn } from "../animation/AnimatedItems";
+import {
+  AnimatedItems,
+  useAnimationCallbacks,
+  type AnimationInterpolateFn,
+} from "../animation/AnimatedItems";
 import {
   matchAnimationItems,
   matchByIndex,
@@ -78,7 +82,7 @@ import { interpolate, isNan, isNullish, isNumber } from "../util/DataUtils";
 import { BaseAxisWithScale } from "../state/selectors/axisSelectors";
 import { StackId } from "../util/ChartUtils";
 import { StackDataPoint } from "../util/stacks/stackTypes";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 import { AreaRevealShape, type AreaRevealShapeProps } from "./AreaRevealShape";
 
 function getLegendItemColor(
@@ -417,45 +421,33 @@ export const Area = (props: AreaProps): JSX.Element => {
   const layout = useCartesianChartLayout();
   const id = useUniqueId("recharts-area", props.id);
 
-  let prev: AreaSettings | null = null;
-
-  createEffect(
-    (): AreaSettings => ({
-      id,
-      type: "area",
-      isPanorama,
-      data: merged.data,
-      dataKey: merged.dataKey ?? "",
-      xAxisId: merged.xAxisId,
-      yAxisId: merged.yAxisId,
-      zAxisId: 0,
-      hide: merged.hide,
-      // Area has no bar size; the field exists only because AreaSettings shares
-      // the MaybeStackedGraphicalItem shape with Bar.
-      barSize: undefined,
-      stackId: merged.stackId == null ? undefined : String(merged.stackId),
-      connectNulls: merged.connectNulls,
-      baseValue: merged.baseValue,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.graphicalItems.addCartesianGraphicalItem(settings);
-      } else if (prev !== settings) {
-        store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.graphicalItems.removeCartesianGraphicalItem(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<AreaSettings>(
+      () => ({
+        id,
+        type: "area",
+        isPanorama,
+        data: merged.data,
+        dataKey: merged.dataKey ?? "",
+        xAxisId: merged.xAxisId,
+        yAxisId: merged.yAxisId,
+        zAxisId: 0,
+        hide: merged.hide,
+        // Area has no bar size; the field exists only because AreaSettings shares
+        // the MaybeStackedGraphicalItem shape with Bar.
+        barSize: undefined,
+        stackId: merged.stackId == null ? undefined : String(merged.stackId),
+        connectNulls: merged.connectNulls,
+        baseValue: merged.baseValue,
+      }),
+      {
+        add: (next) => store.actions.graphicalItems.addCartesianGraphicalItem(next),
+        replace: (prev, next) =>
+          store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next }),
+        remove: (prev) => store.actions.graphicalItems.removeCartesianGraphicalItem(prev),
+      },
+    );
+  }
 
   const area = useAppSelector((state) => selectArea(state, id, isPanorama));
 
@@ -569,18 +561,11 @@ export const Area = (props: AreaProps): JSX.Element => {
     });
   });
   // Labels are hidden while the entrance/update animation runs, shown once it ends.
-  // ownedWrite: handleAnimationEnd also fires from the driver's effect cleanup when
-  // a mid-animation chart is disposed (route/soft navigation) — a legal teardown.
-  const [showLabels, setShowLabels] = createSignal(true, { ownedWrite: true });
-  const labelContextEntries = createMemo(() => (showLabels() ? labelListEntries() : undefined));
-  const handleAnimationStart = (): void => {
-    setShowLabels(false);
-    props.onAnimationStart?.();
-  };
-  const handleAnimationEnd = (): void => {
-    setShowLabels(true);
-    props.onAnimationEnd?.();
-  };
+  const { isAnimating, handleAnimationStart, handleAnimationEnd } = useAnimationCallbacks(
+    () => props.onAnimationStart?.(),
+    () => props.onAnimationEnd?.(),
+  );
+  const labelContextEntries = createMemo(() => (isAnimating() ? undefined : labelListEntries()));
 
   // Per-frame prev geometry (recharts' previousPointsRef / previousBaselineRef):
   // plain `{ current }` refs (NOT signals) driven by AnimatedItems +
@@ -761,7 +746,7 @@ export const Area = (props: AreaProps): JSX.Element => {
                       stepBaseLine,
                       target.isRange,
                       animationElapsedTime,
-                      !showLabels() || animationElapsedTime < 1,
+                      isAnimating() || animationElapsedTime < 1,
                       effectiveIsEntrance,
                     );
                   }}

package/src/cartesian/Bar.tsx

@@ -93,7 +93,7 @@ import {
 import { BaseAxisWithScale } from "../state/selectors/axisSelectors";
 import { StackId } from "../util/ChartUtils";
 import { BarStackClipLayer, useStackId } from "./BarStack";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 const defaultMinPointSize = 0;
 
@@ -419,7 +419,10 @@ function BarBackground(props: {
     if (!backgroundFromProps) {
       return undefined;
     }
-    const active = activeIndex();
+    // NOTE: intentionally does NOT read activeIndex() here — that would rebuild
+    // the whole rects array (and recreate every background-rect DOM node) on
+    // every hover move. `isActive` is derived per-rect in the JSX below, so the
+    // array stays stable across hover and only the active flag updates.
     const dataKey = props.dataKey;
     const backgroundProps = svgPropertiesNoEventsFromUnknown(backgroundFromProps);
     const backgroundEventProps = svgPropertiesAndEventsFromUnknown({
@@ -441,7 +444,7 @@ function BarBackground(props: {
       return [
         {
           option: backgroundFromProps,
-          isActive: String(entry.originalDataIndex) === active,
+          isActive: false, // placeholder; derived reactively per-rect in the JSX below
           ...rest,
           fill: "#eee",
           ...bg,
@@ -465,7 +468,12 @@ function BarBackground(props: {
         <ZIndexLayer zIndex={getZIndexFromUnknown(props.background, DefaultZIndexes.barBackground)}>
           <Layer>
             <For each={rects()}>
-              {(barRectangleProps) => <BarRectangle {...barRectangleProps} />}
+              {(barRectangleProps) => (
+                <BarRectangle
+                  {...barRectangleProps}
+                  isActive={String(barRectangleProps.originalDataIndex) === activeIndex()}
+                />
+              )}
             </For>
           </Layer>
         </ZIndexLayer>
@@ -850,44 +858,32 @@ export const Bar = (props: BarProps): JSX.Element => {
   const activeBar = merged.activeBar;
   const hasCustomShape = shape !== defaultBarShape;
 
-  let prev: BarSettings | null = null;
-
-  createEffect(
-    (): BarSettings => ({
-      id,
-      type: "bar",
-      isPanorama,
-      data: merged.data,
-      dataKey: merged.dataKey,
-      xAxisId: merged.xAxisId,
-      yAxisId: merged.yAxisId,
-      zAxisId: 0,
-      hide: merged.hide,
-      stackId,
-      barSize: merged.barSize,
-      maxBarSize: merged.maxBarSize,
-      minPointSize: merged.minPointSize,
-      hasCustomShape,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.graphicalItems.addCartesianGraphicalItem(settings);
-      } else if (prev !== settings) {
-        store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.graphicalItems.removeCartesianGraphicalItem(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<BarSettings>(
+      () => ({
+        id,
+        type: "bar",
+        isPanorama,
+        data: merged.data,
+        dataKey: merged.dataKey,
+        xAxisId: merged.xAxisId,
+        yAxisId: merged.yAxisId,
+        zAxisId: 0,
+        hide: merged.hide,
+        stackId,
+        barSize: merged.barSize,
+        maxBarSize: merged.maxBarSize,
+        minPointSize: merged.minPointSize,
+        hasCustomShape,
+      }),
+      {
+        add: (next) => store.actions.graphicalItems.addCartesianGraphicalItem(next),
+        replace: (prev, next) =>
+          store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next }),
+        remove: (prev) => store.actions.graphicalItems.removeCartesianGraphicalItem(prev),
+      },
+    );
+  }
 
   // Per-bar <Cell> overrides (collected from children, in data order).
   const cells = collectCells(() => props.children);
@@ -1112,7 +1108,15 @@ export const Bar = (props: BarProps): JSX.Element => {
                   >
                     {(frame, animationElapsedTime, isEntrance) => (
                       <Layer>
-                        <For each={frame}>
+                        {/* keyed={false} (index-keyed): `frame` is a fresh array of
+                            fresh rect objects every animation tick; reference-keyed
+                            <For> would dispose+recreate every bar's DOM node and
+                            rebuild its ~10 event closures per frame. Index-keying
+                            reuses the rows (geometry updates reactively via the
+                            getter-wrapped props) and builds the handlers once per
+                            slot. `r` is now an accessor — event handlers read `r()`
+                            at dispatch time so they see the current frame's rect. */}
+                        <For each={frame} keyed={false}>
                           {(r, i) => (
                             // Render every selector-output rectangle, matching recharts
                             // (zero-dimension genuinely-empty bars are already dropped at
@@ -1124,12 +1128,12 @@ export const Bar = (props: BarProps): JSX.Element => {
                             // here suppressed all animated bars until the animation was
                             // driven to a non-zero frame.
                             <BarRectangleLayer
-                              entry={r}
-                              displayIndex={i()}
+                              entry={r()}
+                              displayIndex={i}
                               dataKey={merged.dataKey}
                               activeBar={activeBar}
-                              fill={r.fill ?? r.cell?.fill ?? merged.fill}
-                              stroke={r.stroke ?? r.cell?.stroke ?? merged.stroke}
+                              fill={r().fill ?? r().cell?.fill ?? merged.fill}
+                              stroke={r().stroke ?? r().cell?.stroke ?? merged.stroke}
                               radius={merged.radius}
                               shape={shape}
                               animationElapsedTime={animationElapsedTime}
@@ -1137,43 +1141,47 @@ export const Bar = (props: BarProps): JSX.Element => {
                               isAnimating={isAnimating() || animationElapsedTime < 1}
                               isEntrance={isEntrance}
                               isEntryActive={isEntryActive}
-                              cellClass={typeof r.class === "string" ? r.class : undefined}
-                              onMouseEnter={onItemEnter(r, r.originalDataIndex)}
-                              onMouseLeave={onItemLeave(r, r.originalDataIndex)}
-                              onClick={onItemClick(r, r.originalDataIndex)}
+                              cellClass={typeof r().class === "string" ? r().class : undefined}
+                              onMouseEnter={(event) =>
+                                onItemEnter(r(), r().originalDataIndex)(event)
+                              }
+                              onMouseLeave={(event) =>
+                                onItemLeave(r(), r().originalDataIndex)(event)
+                              }
+                              onClick={(event) => onItemClick(r(), r().originalDataIndex)(event)}
                               onMouseOver={
                                 onMouseOverHandler != null
-                                  ? (event) => onMouseOverHandler(r, r.originalDataIndex, event)
+                                  ? (event) => onMouseOverHandler(r(), r().originalDataIndex, event)
                                   : undefined
                               }
                               onMouseOut={
                                 onMouseOutHandler != null
-                                  ? (event) => onMouseOutHandler(r, r.originalDataIndex, event)
+                                  ? (event) => onMouseOutHandler(r(), r().originalDataIndex, event)
                                   : undefined
                               }
                               onMouseMove={
                                 onMouseMoveHandler != null
-                                  ? (event) => onMouseMoveHandler(r, r.originalDataIndex, event)
+                                  ? (event) => onMouseMoveHandler(r(), r().originalDataIndex, event)
                                   : undefined
                               }
                               onMouseDown={
                                 onMouseDownHandler != null
-                                  ? (event) => onMouseDownHandler(r, r.originalDataIndex, event)
+                                  ? (event) => onMouseDownHandler(r(), r().originalDataIndex, event)
                                   : undefined
                               }
                               onMouseUp={
                                 onMouseUpHandler != null
-                                  ? (event) => onMouseUpHandler(r, r.originalDataIndex, event)
+                                  ? (event) => onMouseUpHandler(r(), r().originalDataIndex, event)
                                   : undefined
                               }
                               onTouchMove={
                                 onTouchMoveHandler != null
-                                  ? (event) => onTouchMoveHandler(r, i(), event)
+                                  ? (event) => onTouchMoveHandler(r(), i, event)
                                   : undefined
                               }
                               onTouchEnd={
                                 onTouchEndHandler != null
-                                  ? (event) => onTouchEndHandler(r, i(), event)
+                                  ? (event) => onTouchEndHandler(r(), i, event)
                                   : undefined
                               }
                             />

package/src/cartesian/BarStack.tsx

@@ -73,11 +73,14 @@ export const useBarStackClipPathUrl = (index: number): string | undefined => {
 };
 
 export const BarStackClipLayer = (props: LayerProps & { index: number }): JSX.Element => {
-  const clipPathUrl = useBarStackClipPathUrl(props.index);
+  // Memoized so `props.index` is read in a tracking scope: when an index-keyed
+  // <For> feeds a reactive `entry.originalDataIndex` here, a bare hook call would
+  // read it untracked (STRICT_READ_UNTRACKED) and never update.
+  const clipPathUrl = createMemo(() => useBarStackClipPathUrl(props.index));
   return (
     <Layer
       class={["recharts-bar-stack-layer", props.class].filter(Boolean).join(" ")}
-      clipPath={clipPathUrl}
+      clipPath={clipPathUrl()}
       onMouseEnter={props.onMouseEnter}
       onMouseLeave={props.onMouseLeave}
       onClick={props.onClick}

package/src/cartesian/Brush.tsx

@@ -25,7 +25,7 @@
 // "with controlled startIndex/endIndex" Brush.spec block.
 import { createEffect, createMemo, createSignal, merge, onCleanup, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
-import { scalePoint } from "victory-vendor/d3-scale";
+import { scalePoint } from "d3-scale";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { Layer } from "../container/Layer";
 import { Text } from "../component/Text";

package/src/cartesian/Funnel.tsx

@@ -17,11 +17,15 @@
 // Enter/Leave/onTouchStart/Move/End, props-first `(data, index, event)`) ARE wired.
 // No legend registration and no ZIndexLayer — matching recharts (upstream Funnel
 // registers no legend payload and renders inline without a zIndex portal).
-import { createMemo, createSignal, For, merge, Show } from "solid-js";
+import { createMemo, For, merge, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { useAppSelector } from "../state/hooks";
 import { useUniqueId } from "../util/useUniqueId";
-import { AnimatedItems, type AnimationInterpolateFn } from "../animation/AnimatedItems";
+import {
+  AnimatedItems,
+  useAnimationCallbacks,
+  type AnimationInterpolateFn,
+} from "../animation/AnimatedItems";
 import { matchAppend, type AnimationMatchByProp } from "../animation/matchBy";
 import type { MutableRef } from "../animation/useAnimationStartSnapshot";
 import { useCartesianChartLayout } from "../context/chartLayoutContext";
@@ -452,18 +456,11 @@ export function Funnel<DataPointType = Record<string, unknown>, DataValueType =
     current: null,
   };
 
-  // ownedWrite: handleAnimationEnd also fires from the animation effect cleanup when
-  // a mid-animation chart is disposed (route/soft navigation) — a legal teardown.
-  const [showLabels, setShowLabels] = createSignal(true, { ownedWrite: true });
-  const labelContextEntries = createMemo(() => (showLabels() ? labelListEntries() : undefined));
-  const handleAnimationStart = (): void => {
-    props.onAnimationStart?.();
-    setShowLabels(false);
-  };
-  const handleAnimationEnd = (): void => {
-    props.onAnimationEnd?.();
-    setShowLabels(true);
-  };
+  const { isAnimating, handleAnimationStart, handleAnimationEnd } = useAnimationCallbacks(
+    () => props.onAnimationStart?.(),
+    () => props.onAnimationEnd?.(),
+  );
+  const labelContextEntries = createMemo(() => (isAnimating() ? undefined : labelListEntries()));
 
   const layerClass = (): string =>
     ["recharts-trapezoids", merged.class].filter((c): c is string => Boolean(c)).join(" ");
@@ -514,13 +511,12 @@ export function Funnel<DataPointType = Record<string, unknown>, DataValueType =
                         const isActive = (): boolean =>
                           Boolean(activeShape) && activeItemIndex() === String(i());
                         // v3.9 ShapeAnimationProps forwarded into the custom-shape
-                        // invocation, mirroring upstream FunnelTrapezoids. `showLabels`
-                        // is the inverse of upstream's `isAnimating` (false during the
-                        // animation); combine `< 1` like upstream so the shape sees
-                        // `isAnimating` through the whole entrance frame.
+                        // invocation, mirroring upstream FunnelTrapezoids. Combine
+                        // `< 1` like upstream so the shape sees `isAnimating` through
+                        // the whole entrance frame.
                         const shapeAnimationProps = (): ShapeAnimationProps => ({
                           animationElapsedTime,
-                          isAnimating: !showLabels() || animationElapsedTime < 1,
+                          isAnimating: isAnimating() || animationElapsedTime < 1,
                           isEntrance,
                         });
                         return (

package/src/cartesian/Line.tsx

@@ -25,7 +25,11 @@ import { useActiveTooltipDataPoints } from "../hooks";
 import { selectActiveTooltipIndex } from "../state/selectors/tooltipSelectors";
 import type { JSX } from "@solidjs/web";
 import { useAppSelector, useAppStore } from "../state/hooks";
-import { AnimatedItems, type AnimationInterpolateFn } from "../animation/AnimatedItems";
+import {
+  AnimatedItems,
+  useAnimationCallbacks,
+  type AnimationInterpolateFn,
+} from "../animation/AnimatedItems";
 import { matchByIndex, type AnimationItem, type AnimationMatchByProp } from "../animation/matchBy";
 import type { MutableRef } from "../animation/useAnimationStartSnapshot";
 import { LineDrawShape, type LineDrawShapeProps } from "./LineDrawShape";
@@ -80,7 +84,7 @@ import { BaseAxisWithScale } from "../state/selectors/axisSelectors";
 import { GraphicalItemClipPath, useNeedsClip } from "./GraphicalItemClipPath";
 import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export interface LinePointItem {
   readonly value: unknown;
@@ -342,39 +346,27 @@ export const Line = (props: LineProps): JSX.Element => {
   const layout = useCartesianChartLayout();
   const id = useUniqueId("recharts-line", props.id);
 
-  let prev: LineSettings | null = null;
-
-  createEffect(
-    (): LineSettings => ({
-      id,
-      type: "line",
-      isPanorama,
-      data: merged.data,
-      dataKey: merged.dataKey,
-      xAxisId: merged.xAxisId,
-      yAxisId: merged.yAxisId,
-      zAxisId: 0,
-      hide: merged.hide,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.graphicalItems.addCartesianGraphicalItem(settings);
-      } else if (prev !== settings) {
-        store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.graphicalItems.removeCartesianGraphicalItem(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<LineSettings>(
+      () => ({
+        id,
+        type: "line",
+        isPanorama,
+        data: merged.data,
+        dataKey: merged.dataKey,
+        xAxisId: merged.xAxisId,
+        yAxisId: merged.yAxisId,
+        zAxisId: 0,
+        hide: merged.hide,
+      }),
+      {
+        add: (next) => store.actions.graphicalItems.addCartesianGraphicalItem(next),
+        replace: (prev, next) =>
+          store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next }),
+        remove: (prev) => store.actions.graphicalItems.removeCartesianGraphicalItem(prev),
+      },
+    );
+  }
 
   const points = useAppSelector((state) =>
     selectLinePoints(state, merged.xAxisId, merged.yAxisId, isPanorama, id),
@@ -494,19 +486,11 @@ export const Line = (props: LineProps): JSX.Element => {
   });
   // Labels are hidden while the entrance animation runs and shown once it ends
   // (matching recharts: showLabels = !isAnimating).
-  // ownedWrite: handleAnimationEnd also fires from the animation effect cleanup
-  // when a mid-animation chart is disposed (route/soft navigation) — a legal
-  // teardown write, not a write-in-computation bug.
-  const [showLabels, setShowLabels] = createSignal(true, { ownedWrite: true });
-  const labelContextEntries = createMemo(() => (showLabels() ? labelListEntries() : undefined));
-  const handleAnimationStart = (): void => {
-    props.onAnimationStart?.();
-    setShowLabels(false);
-  };
-  const handleAnimationEnd = (): void => {
-    props.onAnimationEnd?.();
-    setShowLabels(true);
-  };
+  const { isAnimating, handleAnimationStart, handleAnimationEnd } = useAnimationCallbacks(
+    () => props.onAnimationStart?.(),
+    () => props.onAnimationEnd?.(),
+  );
+  const labelContextEntries = createMemo(() => (isAnimating() ? undefined : labelListEntries()));
 
   // Measure on data change AND on animation start/end (showLabels flips): a
   // data-change morph alters the path geometry per frame, so the length taken
@@ -515,7 +499,7 @@ export const Line = (props: LineProps): JSX.Element => {
   // settled dasharray the new curve's true length — mirroring recharts, which
   // recomputes totalLength on the post-animation re-render.
   createEffect(
-    () => ({ points: points(), showLabels: showLabels() }),
+    () => ({ points: points(), showLabels: !isAnimating() }),
     () => {
       if (curveEl?.getTotalLength == null) {
         return;
@@ -627,8 +611,7 @@ export const Line = (props: LineProps): JSX.Element => {
                     // recharts: visibleLength is computed only while the animation is
                     // active; once settled it is null so no entrance dasharray remains.
                     const len = untrack(totalLength);
-                    const animationActive =
-                      untrack(showLabels) === false || animationElapsedTime < 1;
+                    const animationActive = untrack(isAnimating) || animationElapsedTime < 1;
                     const visibleLength = animationActive
                       ? animatedLineLength.getVisibleLength(animationElapsedTime, len)
                       : null;

package/src/cartesian/LineDrawShape.tsx

@@ -138,14 +138,16 @@ export function LineDrawShape(props: LineDrawShapeProps): JSX.Element {
     props.forwardPathRef?.(el);
   };
 
-  // Re-measure whenever the geometry or the animation frame changes (a data-change
-  // morph alters the path per frame; remeasuring once the frame committed gives the
-  // settled dash the new curve's true length — mirrors recharts recomputing
-  // totalLength on the post-animation re-render).
+  // Re-measure the path length only while the entrance dash is actually being
+  // drawn (`visibleLength != null`). `totalLength` feeds `strokeDasharray` ONLY on
+  // that branch (see below), so once the reveal is done — including every
+  // subsequent data-change morph, where `frame` changes per frame — measuring
+  // would force a synchronous SVG layout (reflow) each frame for a value nothing
+  // reads. Guarding on visibleLength drops those per-frame reflows.
   createEffect(
     () => ({ points: props.points, visibleLength: props.visibleLength }),
-    () => {
-      if (pathEl?.getTotalLength == null) {
+    (deps) => {
+      if (deps.visibleLength == null || pathEl?.getTotalLength == null) {
         return;
       }
       const length = getTotalLength(pathEl);