Merge pull request #2006 from FormidableLabs/improvement/memoize-reduce-children

Memoize getCalculatedProps

Author: Becca Bailey

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

@@ -2,7 +2,8 @@
 /* eslint-disable no-use-before-define */
 import { assign } 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: Helpers.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

@@ -3,6 +3,7 @@
 import { assign, keys, orderBy } 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: Helpers.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(() => {