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 = (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 = (initialProps) => { {}, containerComponent.props, containerProps, - UserProps.getSafeUserProps(initialProps), + UserProps.getSafeUserProps(propsWithDefaults), ); return React.cloneElement(containerComponent, defaultContainerProps); } @@ -164,23 +167,23 @@ const VictoryChartImpl: React.FC = (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 ; + const propsWithDefaults = { ...defaultProps, ...props }; + return ; }; /** 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 (