refactor(ResponsiveContainer): improve performance memoizing internal…

… variables

src/component/ResponsiveContainer.tsx

@@ -3,7 +3,17 @@
  */
 import classNames from 'classnames';
 import _ from 'lodash';
-import React, { ReactElement, forwardRef, cloneElement, useState, useImperativeHandle, useRef, useEffect } from 'react';
+import React, {
+  ReactElement,
+  forwardRef,
+  cloneElement,
+  useState,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from 'react';
 import ReactResizeDetector from 'react-resize-detector';
 import { isPercent } from '../util/DataUtils';
 import { warn } from '../util/LogUtils';
@@ -21,11 +31,6 @@ export interface Props {
   className?: string | number;
 }
 
-interface State {
-  containerWidth: number;
-  containerHeight: number;
-}
-
 export const ResponsiveContainer = forwardRef(
   (
     {
@@ -42,16 +47,18 @@ export const ResponsiveContainer = forwardRef(
     }: Props,
     ref,
   ) => {
-    const [sizes, setSizes] = useState<State>({
+    const [sizes, setSizes] = useState<{
+      containerWidth: number;
+      containerHeight: number;
+    }>({
       containerWidth: -1,
       containerHeight: -1,
     });
+
     const containerRef = useRef<HTMLDivElement>(null);
     useImperativeHandle(ref, () => containerRef, [containerRef]);
 
-    const [mounted, setMounted] = useState<boolean>(false);
-
-    const getContainerSize = () => {
+    const getContainerSize = useCallback(() => {
       if (!containerRef.current) {
         return null;
       }
@@ -60,28 +67,31 @@ export const ResponsiveContainer = forwardRef(
         containerWidth: containerRef.current.clientWidth,
         containerHeight: containerRef.current.clientHeight,
       };
-    };
-
-    const updateDimensionsImmediate = () => {
-      if (!mounted) {
-        return;
-      }
+    }, []);
 
+    const updateDimensionsImmediate = useCallback(() => {
       const newSize = getContainerSize();
 
       if (newSize) {
-        const { containerWidth: oldWidth, containerHeight: oldHeight } = sizes;
         const { containerWidth, containerHeight } = newSize;
 
-        if (containerWidth !== oldWidth || containerHeight !== oldHeight) {
-          setSizes({ containerWidth, containerHeight });
-        }
+        setSizes(currentSizes => {
+          const { containerWidth: oldWidth, containerHeight: oldHeight } = currentSizes;
+          if (containerWidth !== oldWidth || containerHeight !== oldHeight) {
+            return { containerWidth, containerHeight };
+          }
+
+          return currentSizes;
+        });
       }
-    };
+    }, [getContainerSize]);
 
-    const handleResize = debounce > 0 ? _.debounce(updateDimensionsImmediate, debounce) : updateDimensionsImmediate;
+    const handleResize = useMemo(
+      () => (debounce > 0 ? _.debounce(updateDimensionsImmediate, debounce) : updateDimensionsImmediate),
+      [debounce, updateDimensionsImmediate],
+    );
 
-    const renderChart = () => {
+    const computedSizes = useMemo(() => {
       const { containerWidth, containerHeight } = sizes;
 
       if (containerWidth < 0 || containerHeight < 0) {
@@ -132,27 +142,21 @@ export const ResponsiveContainer = forwardRef(
         aspect,
       );
 
-      return cloneElement(children, {
+      return {
         width: calculatedWidth,
         height: calculatedHeight,
-      });
-    };
+      };
+    }, [aspect, height, maxHeight, minHeight, minWidth, sizes, width]);
 
     useEffect(() => {
-      if (mounted) {
-        const size = getContainerSize();
+      const size = getContainerSize();
 
-        if (size) {
-          setSizes(size);
-        }
+      if (size) {
+        setSizes(size);
       }
-    }, [mounted]);
-
-    useEffect(() => {
-      setMounted(true);
-    }, []);
+    }, [getContainerSize]);
 
-    const style = { width, height, minWidth, minHeight, maxHeight };
+    const style: React.CSSProperties = { width, height, minWidth, minHeight, maxHeight };
 
     return (
       <ReactResizeDetector handleWidth handleHeight onResize={handleResize} targetRef={containerRef}>
@@ -162,7 +166,7 @@ export const ResponsiveContainer = forwardRef(
           style={style}
           ref={containerRef}
         >
-          {renderChart()}
+          {cloneElement(children, computedSizes)}
         </div>
       </ReactResizeDetector>
     );