recharts - npm Package Compare versions

Comparing version 2.3.0 to 2.3.1

es6/component/ResponsiveContainer.js

@@ -13,3 +13,3 @@ import _debounce from "lodash/debounce";
 import classNames from 'classnames';
-import React, { forwardRef, cloneElement, useState, useImperativeHandle, useRef, useEffect, useCallback, useMemo } from 'react';
+import React, { forwardRef, cloneElement, useState, useImperativeHandle, useRef, useEffect } from 'react';
 import ReactResizeDetector from 'react-resize-detector';
@@ -43,3 +43,7 @@ import { isPercent } from '../util/DataUtils';
   }, [containerRef]);
-  var getContainerSize = useCallback(function () {
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mounted = _useState4[0],
+    setMounted = _useState4[1];
+  var getContainerSize = function getContainerSize() {
     if (!containerRef.current) {
@@ -52,25 +56,23 @@ return null;
     };
-  }, []);
-  var updateDimensionsImmediate = useCallback(function () {
+  };
+  var updateDimensionsImmediate = function updateDimensionsImmediate() {
+    if (!mounted) {
+      return;
+    }
     var newSize = getContainerSize();
     if (newSize) {
+      var oldWidth = sizes.containerWidth,
+        oldHeight = sizes.containerHeight;
       var containerWidth = newSize.containerWidth,
         containerHeight = newSize.containerHeight;
-      setSizes(function (currentSizes) {
-        var oldWidth = currentSizes.containerWidth,
-          oldHeight = currentSizes.containerHeight;
-        if (containerWidth !== oldWidth || containerHeight !== oldHeight) {
-          return {
-            containerWidth: containerWidth,
-            containerHeight: containerHeight
-          };
-        }
-        return currentSizes;
-      });
+      if (containerWidth !== oldWidth || containerHeight !== oldHeight) {
+        setSizes({
+          containerWidth: containerWidth,
+          containerHeight: containerHeight
+        });
+      }
     }
-  }, [getContainerSize]);
-  var handleResize = useMemo(function () {
-    return debounce > 0 ? _debounce(updateDimensionsImmediate, debounce) : updateDimensionsImmediate;
-  }, [debounce, updateDimensionsImmediate]);
-  var computedSizes = useMemo(function () {
+  };
+  var handleResize = debounce > 0 ? _debounce(updateDimensionsImmediate, debounce) : updateDimensionsImmediate;
+  var renderChart = function renderChart() {
     var containerWidth = sizes.containerWidth,
@@ -101,13 +103,18 @@ containerHeight = sizes.containerHeight;
     warn(calculatedWidth > 0 || calculatedHeight > 0, "The width(%s) and height(%s) of chart should be greater than 0,\n       please check the style of container, or the props width(%s) and height(%s),\n       or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the\n       height and width.", calculatedWidth, calculatedHeight, width, height, minWidth, minHeight, aspect);
-    return {
+    return /*#__PURE__*/cloneElement(children, {
       width: calculatedWidth,
       height: calculatedHeight
-    };
-  }, [aspect, height, maxHeight, minHeight, minWidth, sizes, width]);
+    });
+  };
   useEffect(function () {
-    var size = getContainerSize();
-    if (size) {
-      setSizes(size);
+    if (mounted) {
+      var size = getContainerSize();
+      if (size) {
+        setSizes(size);
+      }
     }
-  }, [getContainerSize]);
+  }, [mounted]);
+  useEffect(function () {
+    setMounted(true);
+  }, []);
   var style = {
@@ -131,3 +138,3 @@ width: width,
     ref: containerRef
-  }), /*#__PURE__*/cloneElement(children, computedSizes)));
+  }), renderChart()));
 });

lib/component/ResponsiveContainer.js

@@ -49,3 +49,7 @@ "use strict";
   }, [containerRef]);
-  var getContainerSize = (0, _react.useCallback)(function () {
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mounted = _useState4[0],
+    setMounted = _useState4[1];
+  var getContainerSize = function getContainerSize() {
     if (!containerRef.current) {
@@ -58,25 +62,23 @@ return null;
     };
-  }, []);
-  var updateDimensionsImmediate = (0, _react.useCallback)(function () {
+  };
+  var updateDimensionsImmediate = function updateDimensionsImmediate() {
+    if (!mounted) {
+      return;
+    }
     var newSize = getContainerSize();
     if (newSize) {
+      var oldWidth = sizes.containerWidth,
+        oldHeight = sizes.containerHeight;
       var containerWidth = newSize.containerWidth,
         containerHeight = newSize.containerHeight;
-      setSizes(function (currentSizes) {
-        var oldWidth = currentSizes.containerWidth,
-          oldHeight = currentSizes.containerHeight;
-        if (containerWidth !== oldWidth || containerHeight !== oldHeight) {
-          return {
-            containerWidth: containerWidth,
-            containerHeight: containerHeight
-          };
-        }
-        return currentSizes;
-      });
+      if (containerWidth !== oldWidth || containerHeight !== oldHeight) {
+        setSizes({
+          containerWidth: containerWidth,
+          containerHeight: containerHeight
+        });
+      }
     }
-  }, [getContainerSize]);
-  var handleResize = (0, _react.useMemo)(function () {
-    return debounce > 0 ? (0, _debounce2["default"])(updateDimensionsImmediate, debounce) : updateDimensionsImmediate;
-  }, [debounce, updateDimensionsImmediate]);
-  var computedSizes = (0, _react.useMemo)(function () {
+  };
+  var handleResize = debounce > 0 ? (0, _debounce2["default"])(updateDimensionsImmediate, debounce) : updateDimensionsImmediate;
+  var renderChart = function renderChart() {
     var containerWidth = sizes.containerWidth,
@@ -107,13 +109,18 @@ containerHeight = sizes.containerHeight;
     (0, _LogUtils.warn)(calculatedWidth > 0 || calculatedHeight > 0, "The width(%s) and height(%s) of chart should be greater than 0,\n       please check the style of container, or the props width(%s) and height(%s),\n       or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the\n       height and width.", calculatedWidth, calculatedHeight, width, height, minWidth, minHeight, aspect);
-    return {
+    return /*#__PURE__*/(0, _react.cloneElement)(children, {
       width: calculatedWidth,
       height: calculatedHeight
-    };
-  }, [aspect, height, maxHeight, minHeight, minWidth, sizes, width]);
+    });
+  };
   (0, _react.useEffect)(function () {
-    var size = getContainerSize();
-    if (size) {
-      setSizes(size);
+    if (mounted) {
+      var size = getContainerSize();
+      if (size) {
+        setSizes(size);
+      }
     }
-  }, [getContainerSize]);
+  }, [mounted]);
+  (0, _react.useEffect)(function () {
+    setMounted(true);
+  }, []);
   var style = {
@@ -137,4 +144,4 @@ width: width,
     ref: containerRef
-  }), /*#__PURE__*/(0, _react.cloneElement)(children, computedSizes)));
+  }), renderChart()));
 });
 exports.ResponsiveContainer = ResponsiveContainer;

package.json

 {
   "name": "recharts",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "React charts",
@@ -5,0 +5,0 @@ "main": "lib/index",

No alert changes

Improved metrics

Lines of code

38910

0.04%

Worsened metrics

Total package byte prevSize

4688311

-0.01%

No dependency changes