Small improvements

Author: bernardobelchior

packages/x-charts/src/LineChart/AnimatedLine.tsx

@@ -20,8 +20,8 @@ export interface AnimatedLineProps extends React.ComponentPropsWithoutRef<'path'
 }
 
 const DURATION = 200;
-function useLineAnimatedProps(props: Pick<AnimatedLineProps, 'd' | 'skipAnimation'>) {
-  const lastValues = React.useRef({ d: props.d });
+function useAnimatePath(props: Pick<AnimatedLineProps, 'd' | 'skipAnimation'>) {
+  const lastDRef = React.useRef(props.d);
   const transitionRef = React.useRef<Transition<SVGPathElement, unknown, null, undefined>>(null);
   const [path, setPath] = React.useState<SVGPathElement | null>(null);
 
@@ -31,7 +31,7 @@ function useLineAnimatedProps(props: Pick<AnimatedLineProps, 'd' | 'skipAnimatio
       return;
     }
 
-    const lastD = lastValues.current.d;
+    const lastD = lastDRef.current;
     const stringInterpolator = interpolateString(lastD, props.d);
 
     transitionRef.current = select(path)
@@ -40,7 +40,7 @@ function useLineAnimatedProps(props: Pick<AnimatedLineProps, 'd' | 'skipAnimatio
       .attrTween('d', () => (t) => {
         const interpolatedD = stringInterpolator(t);
 
-        lastValues.current = { d: interpolatedD };
+        lastDRef.current = interpolatedD;
 
         return interpolatedD;
       });
@@ -66,13 +66,14 @@ const AnimatedLine = React.forwardRef<SVGPathElement, AnimatedLineProps>(
   function AnimatedLine(props, ref) {
     const { d, skipAnimation, ownerState, ...other } = props;
 
-    const animateRef = useLineAnimatedProps(props);
+    const animateRef = useAnimatePath(props);
     const forkRef = useForkRef(ref, animateRef);
 
     return (
       <AppearingMask skipAnimation={skipAnimation} id={`${ownerState.id}-line-clip`}>
         <path
           ref={forkRef}
+          // TODO: Removed `d` prop from the since `useAnimatePath` is handling it. Not sure how this impacts SSR, though.
           stroke={ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color}
           strokeWidth={2}
           strokeLinejoin="round"