A more performant version of Visx's `<SplitLinePath>`. See https://github.com/airbnb/visx/issues/1591

PerformantSplitLinePath.tsx

import { LinePath, line } from "@visx/shape";
import { SplitLinePathProps } from "@visx/shape/lib/shapes/SplitLinePath";
import { Fragment } from "react";

type PerformantSplitLinePathRenderer = (renderProps: {
  index: number;
  path: string;
  styles?: Omit<React.SVGProps<SVGPathElement>, "x" | "y" | "children">;
}) => React.ReactNode;

type PerformantSplitLinePathProps<Datum> = Omit<
  SplitLinePathProps<Datum>,
  "children"
> & { children?: PerformantSplitLinePathRenderer };

// A more performant version of Visx's <SplitLinePath>
export function PerformantSplitLinePath<Datum>({
  children,
  className,
  curve,
  defined,
  segments,
  x,
  y,
  styles,
}: PerformantSplitLinePathProps<Datum>) {
  const path = line<Datum>({ x, y, defined, curve });
  const paths = segments.map((segment, index, segments) => {
    const isLastSegment = index === segments.length - 1;
    const segmentIncludingStartOfNextSegment = isLastSegment
      ? segment
      : segment.concat(segments[index + 1][0]);
    return path(segmentIncludingStartOfNextSegment) || "";
  });

  return (
    <g>
      {paths.map((path, index) =>
        children ? (
          <Fragment key={index}>
            {children({
              index,
              path,
              styles: styles[index] || styles[index % styles.length],
            })}
          </Fragment>
        ) : (
          <LinePath
            key={index}
            className={className}
            d={path}
            {...(styles[index] || styles[index % styles.length])}
          />
        ),
      )}
    </g>
  );
}