Use shallow-equal instead of JSON stringify

Author: onurkerimov

package.json

@@ -38,13 +38,13 @@
   ],
   "dependencies": {
     "classnames": "^2.2.6",
-    "normalize.css": "^8.0.1",
     "prop-types": "^15.7.2",
-    "react-list": "^0.8.13"
+    "react-list": "^0.8.13",
+    "shallow-equal": "^1.2.1"
   },
   "peerDependencies": {
-    "react": "^0.14 || ^15.0.0-rc || >=15.0",
-    "date-fns": "2.0.0-alpha.7 || >=2.0.0"
+    "date-fns": "2.0.0-alpha.7 || >=2.0.0",
+    "react": "^0.14 || ^15.0.0-rc || >=15.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.7.7",
@@ -57,6 +57,7 @@
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.2.0",
+    "date-fns": "^2.8.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.3",
@@ -67,18 +68,18 @@
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.17.0",
     "jest": "^24.9.0",
+    "normalize.css": "^8.0.1",
     "postcss": "^7.0.25",
     "postcss-cli": "^6.1.3",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "precss": "^4.0.0",
     "prettier": "^1.19.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "react-styleguidist": "^10.4.0",
     "style-loader": "^1.0.0",
     "url-loader": "^3.0.0",
-    "webpack": "^4.41.5",
-    "date-fns": "^2.8.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "webpack": "^4.41.5"
   }
 }

src/components/Calendar/index.js

@@ -6,6 +6,7 @@ import DateInput from '../DateInput';
 import { calcFocusDate, generateStyles, getMonthDisplayRange } from '../../utils';
 import classnames from 'classnames';
 import ReactList from 'react-list';
+import { shallowEqualObjects } from 'shallow-equal';
 import {
   addMonths,
   format,
@@ -32,8 +33,7 @@ class Calendar extends PureComponent {
   constructor(props, context) {
     super(props, context);
     this.dateOptions = { locale: props.locale };
-    if (this.props.weekStartsOn !== undefined)
-      this.dateOptions.weekStartsOn = this.props.weekStartsOn;
+    if (props.weekStartsOn !== undefined) this.dateOptions.weekStartsOn = props.weekStartsOn;
     this.styles = generateStyles([coreStyles, props.classNames]);
     this.listSizeCache = {};
     this.isFirstRender = true;
@@ -133,7 +133,7 @@ class Calendar extends PureComponent {
       });
     }
 
-    if (JSON.stringify(prevProps.scroll) !== JSON.stringify(this.props.scroll)) {
+    if (!shallowEqualObjects(prevProps.scroll, this.props.scroll)) {
       this.setState({ scrollArea: this.calcScrollArea(this.props) });
     }
   }
@@ -378,24 +378,27 @@ class Calendar extends PureComponent {
       minDate,
       rangeColors,
       color,
+      navigatorRenderer,
+      className,
+      preview,
     } = this.props;
     const { scrollArea, focusedDate } = this.state;
     const isVertical = direction === 'vertical';
-    const navigatorRenderer = this.props.navigatorRenderer || this.renderMonthAndYear;
+    const monthAndYearRenderer = navigatorRenderer || this.renderMonthAndYear;
 
     const ranges = this.props.ranges.map((range, i) => ({
       ...range,
       color: range.color || rangeColors[i] || color,
     }));
     return (
       <div
-        className={classnames(this.styles.calendarWrapper, this.props.className)}
+        className={classnames(this.styles.calendarWrapper, className)}
         onMouseUp={() => this.setState({ drag: { status: false, range: {} } })}
         onMouseLeave={() => {
           this.setState({ drag: { status: false, range: {} } });
         }}>
         {showDateDisplay && this.renderDateDisplay()}
-        {navigatorRenderer(focusedDate, this.changeShownDate, this.props)}
+        {monthAndYearRenderer(focusedDate, this.changeShownDate, this.props)}
         {scroll.enabled ? (
           <div>
             {isVertical && this.renderWeekdays(this.dateOptions)}
@@ -426,8 +429,8 @@ class Calendar extends PureComponent {
                   return (
                     <Month
                       {...this.props}
-                      onPreviewChange={this.props.onPreviewChange || this.updatePreview}
-                      preview={this.props.preview || this.state.preview}
+                      onPreviewChange={onPreviewChange || this.updatePreview}
+                      preview={preview || this.state.preview}
                       ranges={ranges}
                       key={key}
                       drag={this.state.drag}
@@ -463,8 +466,8 @@ class Calendar extends PureComponent {
               return (
                 <Month
                   {...this.props}
-                  onPreviewChange={this.props.onPreviewChange || this.updatePreview}
-                  preview={this.props.preview || this.state.preview}
+                  onPreviewChange={onPreviewChange || this.updatePreview}
+                  preview={preview || this.state.preview}
                   ranges={ranges}
                   key={i}
                   drag={this.state.drag}