Assign merged props to a const instead of modifying initialProps (#2718)

.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

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 (

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} />;
  };
 
  /**

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 (