Skip to content

Conversation

@becca-bailey
Copy link
Contributor

This makes a small performance improvement or VictoryGroup and VictoryStack by memoizing the results of the calculated props so that the reduceChildren function is called fewer times.

This function is still called at least once on every mouseover event in a VictoryVoronoiContainer. Victory currently relies heavily on static properties like Component.getChildren and Component.defaultEvents. I am finding these static functions to be a lot harder to memoize, and it might be worth re-evaluating this architecture in the future.

Another thing that made this tricky was the way that sharedEvents gets passed into every data component as a prop. In order to get memoization working here, I needed to go through and strip this prop from the children so that isEqual(props, newProps) only returns false if the actual data has changed. I would also recommend updating this pattern in the future so that child components can access sharedEvents from shared context or state rather than receiving it as a prop. When the props are manipulated on each render, it causes a lot of extra re-rendering as the parent components perceive that their children have all changed, even if the shared state only affects one component (like the tooltip).

I'll leave #1996 open for now, since there is still some additional work to be done here.

@becca-bailey becca-bailey changed the title Memoize reduce children Memoize getCalculatedProps Oct 22, 2021
@github-actions github-actions bot temporarily deployed to staging-2006 October 22, 2021 18:53 Inactive
@github-actions github-actions bot temporarily deployed to staging-2006 October 22, 2021 19:23 Inactive
@becca-bailey becca-bailey requested a review from boygirl October 22, 2021 19:24
/* eslint-disable func-style */
/* eslint-disable no-use-before-define */
import { assign } from "lodash";
import { assign, omit } from "lodash";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Victory maintains a simplified omit helper that is more performant than the more complete lodash.omit. You might consider using that instead: https://github.com/FormidableLabs/victory/blob/main/packages/victory-core/src/victory-util/helpers.js#L31

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do!

Copy link
Contributor

@boygirl boygirl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@beccanelson this looks great. I left one minor piece of feedback, but I think this is otherwise good to go.

@github-actions github-actions bot temporarily deployed to staging-2006 October 27, 2021 17:22 Inactive
return {
...child,
props: omit(child.props, "sharedEvents")
props: Helpers.omit(child.props, ["sharedEvents"])
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you'll have an unused lodash omit in this file now

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, I just fixed that

@boygirl
Copy link
Contributor

boygirl commented Oct 27, 2021

🚀

@becca-bailey becca-bailey merged commit 64c9a66 into main Oct 27, 2021
@becca-bailey becca-bailey deleted the improvement/memoize-reduce-children branch October 27, 2021 19:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants