From ab8d636431dc6171f9fbbd38d55843c294daf403 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Tue, 16 Jan 2024 15:24:57 +0000
Subject: [PATCH] Assign merged props to a const instead of modifying
 initialProps (#2718)

---
 .changeset/angry-pens-provide.md              |  7 +++++++
 packages/victory-chart/src/victory-chart.tsx  | 19 ++++++++++--------
 .../src/helpers/wrap-core-component.js        |  4 ++--
 packages/victory-stack/src/victory-stack.tsx  | 20 ++++++++++---------
 4 files changed, 31 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/angry-pens-provide.md

diff --git a/.changeset/angry-pens-provide.md b/.changeset/angry-pens-provide.md
new file mode 100644
index 000000000..39d6fb9b2
--- /dev/null
+++ b/.changeset/angry-pens-provide.md
@@ -0,0 +1,7 @@
+---
+"victory-chart": patch
+"victory-native": patch
+"victory-stack": patch
+---
+
+Assign merged props to a const instead of modifying initialProps
diff --git a/packages/victory-chart/src/victory-chart.tsx b/packages/victory-chart/src/victory-chart.tsx
index f4a10c605..f42f4fd30 100644
--- a/packages/victory-chart/src/victory-chart.tsx
+++ b/packages/victory-chart/src/victory-chart.tsx
@@ -53,11 +53,14 @@ const defaultProps = {
 };
 
 const VictoryChartImpl: React.FC<VictoryChartProps> = (initialProps) => {
-  initialProps = { ...defaultProps, ...initialProps };
+  const propsWithDefaults = React.useMemo(
+    () => ({ ...defaultProps, ...initialProps }),
+    [initialProps],
+  );
   const role = "chart";
   const { getAnimationProps, setAnimationState, getProps } =
     Hooks.useAnimationState();
-  const props = getProps(initialProps);
+  const props = getProps(propsWithDefaults);
 
   const modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
   const {
@@ -154,7 +157,7 @@ const VictoryChartImpl: React.FC<VictoryChartProps> = (initialProps) => {
         {},
         containerComponent.props,
         containerProps,
-        UserProps.getSafeUserProps(initialProps),
+        UserProps.getSafeUserProps(propsWithDefaults),
       );
       return React.cloneElement(containerComponent, defaultContainerProps);
     }
@@ -164,23 +167,23 @@ const VictoryChartImpl: React.FC<VictoryChartProps> = (initialProps) => {
     standalone,
     containerComponent,
     containerProps,
-    initialProps,
+    propsWithDefaults,
   ]);
 
   const events = React.useMemo(() => {
     return Wrapper.getAllEvents(props);
   }, [props]);
 
-  const previousProps = Hooks.usePreviousProps(initialProps);
+  const previousProps = Hooks.usePreviousProps(propsWithDefaults);
 
   React.useEffect(() => {
     // This is called before dismount to keep state in sync
     return () => {
-      if (initialProps.animate) {
-        setAnimationState(previousProps, initialProps);
+      if (propsWithDefaults.animate) {
+        setAnimationState(previousProps, propsWithDefaults);
       }
     };
-  }, [setAnimationState, previousProps, initialProps]);
+  }, [setAnimationState, previousProps, propsWithDefaults]);
 
   if (!isEmpty(events)) {
     return (
diff --git a/packages/victory-native/src/helpers/wrap-core-component.js b/packages/victory-native/src/helpers/wrap-core-component.js
index a0dec81d7..49a58031c 100644
--- a/packages/victory-native/src/helpers/wrap-core-component.js
+++ b/packages/victory-native/src/helpers/wrap-core-component.js
@@ -8,8 +8,8 @@ import React from "react";
  */
 export const wrapCoreComponent = ({ Component, defaultProps }) => {
   const WrappedComponent = (props) => {
-    props = { ...defaultProps, ...props };
-    return <Component {...props} />;
+    const propsWithDefaults = { ...defaultProps, ...props };
+    return <Component {...propsWithDefaults} />;
   };
 
   /**
diff --git a/packages/victory-stack/src/victory-stack.tsx b/packages/victory-stack/src/victory-stack.tsx
index 376a7807c..fff347769 100644
--- a/packages/victory-stack/src/victory-stack.tsx
+++ b/packages/victory-stack/src/victory-stack.tsx
@@ -61,13 +61,15 @@ const defaultProps = {
 };
 
 const VictoryStackBase = (initialProps: VictoryStackProps) => {
-  // eslint-disable-next-line no-use-before-define
   const { role } = VictoryStack;
-  initialProps = { ...defaultProps, ...initialProps };
+  const propsWithDefaults = React.useMemo(
+    () => ({ ...defaultProps, ...initialProps }),
+    [initialProps],
+  );
   const { setAnimationState, getAnimationProps, getProps } =
     Hooks.useAnimationState();
 
-  const props = getProps(initialProps);
+  const props = getProps(propsWithDefaults);
 
   const modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
   const {
@@ -134,8 +136,8 @@ const VictoryStackBase = (initialProps: VictoryStackProps) => {
     name,
   ]);
   const userProps = React.useMemo(
-    () => UserProps.getSafeUserProps(initialProps),
-    [initialProps],
+    () => UserProps.getSafeUserProps(propsWithDefaults),
+    [propsWithDefaults],
   );
 
   const container = React.useMemo(() => {
@@ -161,16 +163,16 @@ const VictoryStackBase = (initialProps: VictoryStackProps) => {
     return Wrapper.getAllEvents(props);
   }, [props]);
 
-  const previousProps = Hooks.usePreviousProps(initialProps);
+  const previousProps = Hooks.usePreviousProps(propsWithDefaults);
 
   React.useEffect(() => {
     // This is called before dismount to keep state in sync
     return () => {
-      if (initialProps.animate) {
-        setAnimationState(previousProps, initialProps);
+      if (propsWithDefaults.animate) {
+        setAnimationState(previousProps, propsWithDefaults);
       }
     };
-  }, [setAnimationState, previousProps, initialProps]);
+  }, [setAnimationState, previousProps, propsWithDefaults]);
 
   if (!isEmpty(events)) {
     return (