Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
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 auseMemo
, 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