Fixed the initial mount re-rendering bug in ResponsiveContainer (rech…

…arts#3918)

<!--- Provide a general summary of your changes in the Title above -->

## Description

<!--- Describe your changes in detail -->

## Related Issue

<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Please link to the issue here: -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->

## How Has This Been Tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [ ] I have added a storybook story or extended an existing story to
show my changes
- [x] All new and existing tests passed.

src/component/ResponsiveContainer.tsx

@@ -12,6 +12,7 @@ import React, {
   useEffect,
   useMemo,
   CSSProperties,
+  useCallback,
 } from 'react';
 import throttle from 'lodash/throttle';
 import { isPercent } from '../util/DataUtils';
@@ -77,10 +78,22 @@ export const ResponsiveContainer = forwardRef<HTMLDivElement, Props>(
       containerHeight: initialDimension.height,
     });
 
+    const setContainerSize = useCallback((newWidth: number, newHeight: number) => {
+      setSizes(prevState => {
+        const roundedWidth = Math.round(newWidth);
+        const roundedHeight = Math.round(newHeight);
+        if (prevState.containerWidth === roundedWidth && prevState.containerHeight === roundedHeight) {
+          return prevState;
+        }
+
+        return { containerWidth: roundedWidth, containerHeight: roundedHeight };
+      });
+    }, []);
+
     useEffect(() => {
       let callback = (entries: ResizeObserverEntry[]) => {
         const { width: containerWidth, height: containerHeight } = entries[0].contentRect;
-        setSizes({ containerWidth, containerHeight });
+        setContainerSize(containerWidth, containerHeight);
         onResizeRef.current?.(containerWidth, containerHeight);
       };
       if (debounce > 0) {
@@ -89,14 +102,14 @@ export const ResponsiveContainer = forwardRef<HTMLDivElement, Props>(
       const observer = new ResizeObserver(callback);
 
       const { width: containerWidth, height: containerHeight } = containerRef.current.getBoundingClientRect();
-      setSizes({ containerWidth, containerHeight });
+      setContainerSize(containerWidth, containerHeight);
 
       observer.observe(containerRef.current);
 
       return () => {
         observer.disconnect();
       };
-    }, [debounce]);
+    }, [setContainerSize, debounce]);
 
     const chartContent = useMemo(() => {
       const { containerWidth, containerHeight } = sizes;