Memoize getCalculatedProps

docs/src/app.js

@@ -12,7 +12,7 @@ import get from "lodash/get";
 import GlobalStyle from "./styles/global";
 import theme from "./styles/theme";
 import Analytics from "./google-analytics";
-import { initGoogleTagManager } from './google-tag-manager';
+import { initGoogleTagManager } from "./google-tag-manager";
 import NotFound from "./pages/404";
 
 // eslint-disable-next-line no-magic-numbers
@@ -85,7 +85,6 @@ ScrollToCurrentSection.propTypes = {
 
 // eslint-disable-next-line react/no-multi-comp
 const App = () => {
-
   useEffect(() => {
     initGoogleTagManager();
   }, []);

docs/src/google-tag-manager.js

@@ -1,12 +1,12 @@
 /**
  * Google Tag Manager
  */
-const TagManager = require('react-gtm-module');
+const TagManager = require("react-gtm-module");
 
 export const initGoogleTagManager = () => {
-  if (typeof document === 'undefined') {
+  if (typeof document === "undefined") {
     return {};
   } else {
-    return TagManager.initialize({ gtmId: 'GTM-MD32945' });
+    return TagManager.initialize({ gtmId: "GTM-MD32945" });
   }
 };

packages/victory-group/src/helper-methods.js

@@ -1,8 +1,9 @@
 /* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
-import { assign } from "lodash";
+import { assign, omit } from "lodash";
 import React from "react";
-import { Helpers, Scale, Data, Wrapper } from "victory-core";
+import { Data, Helpers, Scale, Wrapper } from "victory-core";
+import isEqual from "react-fast-compare";
 
 const fallbackProps = {
   width: 450,
@@ -63,6 +64,37 @@ export function getCalculatedProps(props, childComponents) {
   };
 }
 
+// We need to remove sharedEvents in order to memoize the calculated data
+// With shared events, the props change on every event, and every value is re-calculated
+const withoutSharedEvents = (props) => {
+  const { children } = props;
+  const modifiedChildren = React.Children.toArray(children).map((child) => {
+    return {
+      ...child,
+      props: omit(child.props, "sharedEvents")
+    };
+  });
+  props.children = modifiedChildren;
+  return props;
+};
+
+export function useMemoizedProps(initialProps) {
+  const modifiedProps = withoutSharedEvents(initialProps);
+  const [props, setProps] = React.useState(modifiedProps);
+
+  // React.memo uses shallow equality to compare objects. This way props
+  // will only be re-calculated when they change.
+  React.useEffect(() => {
+    if (!isEqual(modifiedProps, props)) {
+      setProps(modifiedProps);
+    }
+  }, [props, setProps, modifiedProps]);
+
+  return React.useMemo(() => {
+    return getCalculatedProps(props, props.children);
+  }, [props]);
+}
+
 function pixelsToValue(props, axis, calculatedProps) {
   if (!props.offset) {
     return 0;

packages/victory-group/src/victory-group.js

@@ -11,7 +11,7 @@ import {
   useAnimationState
 } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
-import { getChildren, getCalculatedProps } from "./helper-methods";
+import { getChildren, useMemoizedProps } from "./helper-methods";
 import isEqual from "react-fast-compare";
 
 const fallbackProps = {
@@ -44,7 +44,7 @@ const VictoryGroup = (initialProps) => {
   } = modifiedProps;
 
   const childComponents = React.Children.toArray(modifiedProps.children);
-  const calculatedProps = getCalculatedProps(modifiedProps, childComponents);
+  const calculatedProps = useMemoizedProps(modifiedProps);
   const { domain, scale, style, origin } = calculatedProps;
 
   const newChildren = React.useMemo(() => {

packages/victory-stack/src/helper-methods.js

@@ -1,8 +1,9 @@
 /* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
-import { assign, keys, orderBy } from "lodash";
+import { assign, keys, orderBy, omit } from "lodash";
 import React from "react";
 import { Helpers, Scale, Wrapper } from "victory-core";
+import isEqual from "react-fast-compare";
 
 const fallbackProps = {
   width: 450,
@@ -160,6 +161,37 @@ export function getCalculatedProps(props, childComponents) {
   };
 }
 
+// We need to remove sharedEvents in order to memoize the calculated data
+// With shared events, the props change on every event, and every value is re-calculated
+const withoutSharedEvents = (props) => {
+  const { children } = props;
+  const modifiedChildren = React.Children.toArray(children).map((child) => {
+    return {
+      ...child,
+      props: omit(child.props, "sharedEvents")
+    };
+  });
+  props.children = modifiedChildren;
+  return props;
+};
+
+export function useMemoizedProps(initialProps) {
+  const modifiedProps = withoutSharedEvents(initialProps);
+  const [props, setProps] = React.useState(modifiedProps);
+
+  // React.memo uses shallow equality to compare objects. This way props
+  // will only be re-calculated when they change.
+  React.useEffect(() => {
+    if (!isEqual(modifiedProps, props)) {
+      setProps(modifiedProps);
+    }
+  }, [props, setProps, modifiedProps]);
+
+  return React.useMemo(() => {
+    return getCalculatedProps(props, props.children);
+  }, [props]);
+}
+
 function getLabels(props, datasets, index) {
   if (!props.labels) {
     return undefined;

packages/victory-stack/src/victory-stack.js

@@ -12,7 +12,7 @@ import {
   usePreviousProps
 } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
-import { getChildren, getCalculatedProps } from "./helper-methods";
+import { getChildren, useMemoizedProps } from "./helper-methods";
 import isEqual from "react-fast-compare";
 
 const fallbackProps = {
@@ -45,7 +45,7 @@ const VictoryStack = (initialProps) => {
   } = modifiedProps;
 
   const childComponents = React.Children.toArray(modifiedProps.children);
-  const calculatedProps = getCalculatedProps(modifiedProps, childComponents);
+  const calculatedProps = useMemoizedProps(modifiedProps);
   const { domain, scale, style, origin } = calculatedProps;
 
   const newChildren = React.useMemo(() => {