perf: use fast-deep-equal for deep comparisons

package.json

@@ -49,10 +49,10 @@
     "@types/js-cookie": "2.2.4",
     "@xobotyi/scrollbar-width": "1.8.2",
     "copy-to-clipboard": "^3.2.0",
+    "fast-deep-equal": "^3.1.1",
     "fast-shallow-equal": "^1.0.0",
     "js-cookie": "^2.2.1",
     "nano-css": "^5.2.1",
-    "react-fast-compare": "^2.0.4",
     "resize-observer-polyfill": "^1.5.1",
     "screenfull": "^5.0.0",
     "set-harmonic-interval": "^1.0.1",
@@ -89,14 +89,14 @@
     "babel-eslint": "10.0.3",
     "babel-loader": "8.0.6",
     "babel-plugin-dynamic-import-node": "2.3.0",
-    "fork-ts-checker-webpack-plugin": "4.0.4",
     "eslint": "6.8.0",
     "eslint-config-react-app": "5.1.0",
     "eslint-plugin-flowtype": "4.6.0",
     "eslint-plugin-import": "2.20.0",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.18.0",
     "eslint-plugin-react-hooks": "2.3.0",
+    "fork-ts-checker-webpack-plugin": "4.0.4",
     "gh-pages": "2.2.0",
     "husky": "4.2.3",
     "jest": "25.1.0",

src/useBattery.ts

@@ -1,7 +1,6 @@
 /* eslint-disable */
 import * as React from 'react';
-import isEqual from 'react-fast-compare';
-import { off, on } from './util';
+import { off, on, isDeepEqual } from './util';
 
 const { useState, useEffect } = React;
 
@@ -54,7 +53,7 @@ function useBattery(): UseBatteryState {
         dischargingTime: battery.dischargingTime,
         chargingTime: battery.chargingTime,
       };
-      !isEqual(state, newState) && setState(newState);
+      !isDeepEqual(state, newState) && setState(newState);
     };
 
     nav!.getBattery!().then((bat: BatteryManager) => {

src/useDeepCompareEffect.ts

@@ -1,5 +1,5 @@
 import { DependencyList, EffectCallback } from 'react';
-import isEqual from 'react-fast-compare';
+import { isDeepEqual } from './util';
 import useCustomCompareEffect from './useCustomCompareEffect';
 
 const isPrimitive = (val: any) => val !== Object(val);
@@ -17,7 +17,7 @@ const useDeepCompareEffect = (effect: EffectCallback, deps: DependencyList) => {
     }
   }
 
-  useCustomCompareEffect(effect, deps, isEqual);
+  useCustomCompareEffect(effect, deps, isDeepEqual);
 };
 
 export default useDeepCompareEffect;

src/util.ts

@@ -3,3 +3,5 @@ export const isClient = typeof window === 'object';
 export const on = (obj: any, ...args: any[]) => obj.addEventListener(...args);
 
 export const off = (obj: any, ...args: any[]) => obj.removeEventListener(...args);
+
+export const isDeepEqual: (a: any, b: any) => boolean = require('fast-deep-equal/react');

stories/useCustomCompareEffect.story.tsx

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { useCounter, useCustomCompareEffect } from '../src';
-import isDeepEqual from 'react-fast-compare';
+import { isDeepEqual } from '../src/util';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {

tests/useCustomCompareEffect.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react-hooks';
 import { useCustomCompareEffect } from '../src';
 import { useEffect } from 'react';
-import isEqual from 'react-fast-compare';
+import { isDeepEqual } from '../src/util';
 
 let options = { max: 10 };
 const mockEffectNormal = jest.fn();
@@ -11,7 +11,7 @@ const mockEffectCallback = jest.fn().mockReturnValue(mockEffectCleanup);
 
 it('should run provided object once', () => {
   const { rerender: rerenderNormal } = renderHook(() => useEffect(mockEffectNormal, [options]));
-  const { rerender: rerenderDeep } = renderHook(() => useCustomCompareEffect(mockEffectDeep, [options], isEqual));
+  const { rerender: rerenderDeep } = renderHook(() => useCustomCompareEffect(mockEffectDeep, [options], isDeepEqual));
 
   expect(mockEffectNormal).toHaveBeenCalledTimes(1);
   expect(mockEffectDeep).toHaveBeenCalledTimes(1);
@@ -32,7 +32,7 @@ it('should run provided object once', () => {
 });
 
 it('should run clean-up provided on unmount', () => {
-  const { unmount } = renderHook(() => useCustomCompareEffect(mockEffectCallback, [options], isEqual));
+  const { unmount } = renderHook(() => useCustomCompareEffect(mockEffectCallback, [options], isDeepEqual));
   expect(mockEffectCleanup).not.toHaveBeenCalled();
 
   unmount();

yarn.lock

@@ -7003,6 +7003,11 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
+fast-deep-equal@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
+  integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
+
 fast-glob@^2.0.2:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"