v2.2.1: Replace deep equal with shallow comparator (#77)

* Replace deep equal with shallow comparator

* Update build badge link

* Update for NaN comparison

README.md

@@ -1,4 +1,4 @@
-# React <Countdown /> [![npm][npm]][npm-url] [![Build Status](https://travis-ci.org/ndresx/react-countdown.svg?branch=master)](https://travis-ci.org/ndresx/react-countdown) [![Coverage Status](https://coveralls.io/repos/github/ndresx/react-countdown/badge.svg?branch=master)](https://coveralls.io/github/ndresx/react-countdown?branch=master)
+# React <Countdown /> [![npm][npm]][npm-url] [![Build Status](https://travis-ci.com/ndresx/react-countdown.svg?branch=master)](https://travis-ci.com/ndresx/react-countdown) [![Coverage Status](https://coveralls.io/repos/github/ndresx/react-countdown/badge.svg?branch=master)](https://coveralls.io/github/ndresx/react-countdown?branch=master)
 A customizable countdown component for React.
 
 * [Getting Started](#getting-started)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-countdown",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "A customizable countdown component for React.",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
@@ -39,7 +39,6 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "lodash.isequal": "^4.5.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
@@ -51,7 +50,6 @@
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/enzyme-to-json": "^1.5.3",
     "@types/jest": "^24.0.13",
-    "@types/lodash.isequal": "^4.5.5",
     "@types/react": "^16.8.19",
     "coveralls": "^3.0.4",
     "enzyme": "^3.10.0",

src/Countdown.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
 
-import Countdown from './Countdown';
+import Countdown, { CountdownProps } from './Countdown';
 import { calcTimeDelta, formatTimeDelta } from './utils';
 
 import { CountdownProps as LegacyCountdownProps } from './LegacyCountdown';
@@ -179,6 +179,38 @@ describe('<Countdown />', () => {
     expect(api.isCompleted()).toBe(true);
   });
 
+  it('should only re-set time delta state when props have changed', () => {
+    const root = document.createElement('div');
+    wrapper = mount(<Countdown date={1000} />, { attachTo: root });
+    const obj = wrapper.instance();
+    obj.setTimeDeltaState = jest.fn();
+
+    function mergeProps(partialProps: Partial<CountdownProps>): CountdownProps {
+      return { ...wrapper.props(), ...partialProps };
+    }
+
+    wrapper.setProps(mergeProps({ date: 500 }));
+    expect(obj.setTimeDeltaState).toHaveBeenCalledTimes(1);
+
+    wrapper.setProps(mergeProps({ intervalDelay: 999 }));
+    expect(obj.setTimeDeltaState).toHaveBeenCalledTimes(2);
+
+    wrapper.setProps(mergeProps({ date: 500 }));
+    expect(obj.setTimeDeltaState).toHaveBeenCalledTimes(2);
+
+    wrapper.setProps(mergeProps({ precision: NaN }));
+    expect(obj.setTimeDeltaState).toHaveBeenCalledTimes(3);
+
+    wrapper.setProps(mergeProps({ precision: NaN }));
+    expect(obj.setTimeDeltaState).toHaveBeenCalledTimes(3);
+
+    wrapper.setProps(mergeProps({ precision: 3 }));
+    expect(obj.setTimeDeltaState).toHaveBeenCalledTimes(4);
+
+    wrapper.setProps(mergeProps({ date: 750 }));
+    expect(obj.setTimeDeltaState).toHaveBeenCalledTimes(5);
+  });
+
   it('should not (try to) set state after component unmount', () => {
     expect(wrapper.state().timeDelta.completed).toBe(false);
 

src/Countdown.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const isEqual = require('lodash.isequal');
-
 import LegacyCountdown, { CountdownProps as LegacyCountdownProps } from './LegacyCountdown';
 
 import {
@@ -125,7 +123,7 @@ export default class Countdown extends React.Component<CountdownProps, Countdown
       return;
     }
 
-    if (!isEqual(this.props, prevProps)) {
+    if (!this.shallowCompareProps(this.props, prevProps)) {
       this.setTimeDeltaState(this.calcTimeDelta());
     }
   }
@@ -207,6 +205,21 @@ export default class Countdown extends React.Component<CountdownProps, Countdown
     return this.state.timeDelta.completed;
   };
 
+  shallowCompareProps(propsA: CountdownProps, propsB: CountdownProps): boolean {
+    const keysA = Object.keys(propsA);
+    return (
+      keysA.length === Object.keys(propsB).length &&
+      !keysA.some(keyA => {
+        const valueA = propsA[keyA];
+        const valueB = propsB[keyA];
+        return (
+          !propsB.hasOwnProperty(keyA) ||
+          !(valueA === valueB || (valueA !== valueA && valueB !== valueB)) // NaN !== NaN
+        );
+      })
+    );
+  }
+
   setTimeDeltaState(timeDelta: CountdownTimeDelta): void {
     let callback;
 

yarn.lock

@@ -971,18 +971,6 @@
   dependencies:
     "@types/jest-diff" "*"
 
-"@types/lodash.isequal@^4.5.5":
-  version "4.5.5"
-  resolved "https://registry.yarnpkg.com/@types/lodash.isequal/-/lodash.isequal-4.5.5.tgz#4fed1b1b00bef79e305de0352d797e9bb816c8ff"
-  integrity sha512-4IKbinG7MGP131wRfceK6W4E/Qt3qssEFLF30LnJbjYiSfHGGRU/Io8YxXrZX109ir+iDETC8hw8QsDijukUVg==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash@*":
-  version "4.14.134"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.134.tgz#9032b440122db3a2a56200e91191996161dde5b9"
-  integrity sha512-2/O0khFUCFeDlbi7sZ7ZFRCcT812fAeOLm7Ev4KbwASkZ575TDrDcY7YyaoHdTOzKcNbfiwLYZqPmoC4wadrsw==
-
 "@types/node@*", "@types/node@^12.0.7":
   version "12.0.7"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.7.tgz#4f2563bad652b2acb1722d7e7aae2b0ff62d192c"