Fix victory-group animation

[KenanYusuf]

Problem

Users are seeing a maximum update depth exceeded error when using the VictoryGroup component, specifically when trying to animate it #2708.

I was able to reproduce this in Storybook by rendering the following component:

const Example = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      setData([
        { x: 1, y: 2 },
        { x: 2, y: 3 },
        { x: 3, y: 5 },
        { x: 4, y: 4 },
        { x: 5, y: 7 },
      ]);
    }, 2000);
  }, []);

  return (
    <VictoryChart>
      <VictoryGroup data={data} animate={{ duration: 1000 }}>
        <VictoryBar />
        <VictoryBar />
      </VictoryGroup>
    </VictoryChart>
  );
};

When the component unmounts (tested in video by switching tab), the error appears.

before.mp4

Solution

The initialProps were being reassigned in the body of the component:

For some reason, this meant that the linter couldn't detect that initialProps is the dependency of a useMemo, which was revealed when the new object was assigned to a const:

To solve this dependency issue, I have wrapped the merging of defaultProps and initialProps in a useMemo.

Working example:

after.mp4

[changeset-bot]

🦋 Changeset detected

Latest commit: 8b7934f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 30 packages

Name	Type
victory-group	Patch
victory-area	Patch
victory-axis	Patch
victory-bar	Patch
victory-box-plot	Patch
victory-brush-container	Patch
victory-brush-line	Patch
victory-candlestick	Patch
victory-canvas	Patch
victory-chart	Patch
victory-core	Patch
victory-create-container	Patch
victory-cursor-container	Patch
victory-errorbar	Patch
victory-histogram	Patch
victory-legend	Patch
victory-line	Patch
victory-native	Patch
victory-pie	Patch
victory-polar-axis	Patch
victory-scatter	Patch
victory-selection-container	Patch
victory-shared-events	Patch
victory-stack	Patch
victory-tooltip	Patch
victory-vendor	Patch
victory-voronoi-container	Patch
victory-voronoi	Patch
victory-zoom-container	Patch
victory	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
victory	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 16, 2024 0:39am