feat: using fastdom to improve performance

Author: runjuu

package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "element-resize-detector": "^1.1.14",
+    "fastdom": "^1.0.9",
     "lodash": "^4.17.10",
     "shallowequal": "^1.1.0"
   },

src/ResizeProvider.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { findDOMNode } from 'react-dom';
+import * as fastdom from 'fastdom';
 
+import { Size } from './types';
 import { ContextValue, Provider } from './context';
 import { getResizeDetector, getSize } from './methods';
 
@@ -11,6 +13,10 @@ export default class ResizeProvider extends React.PureComponent<{}, ContextValue
 
   private currentListenElement: HTMLElement | null = null;
 
+  private measureID?: any;
+
+  private mutateID?: any;
+
   componentDidMount() {
     this.updateListenElement()
   }
@@ -32,7 +38,20 @@ export default class ResizeProvider extends React.PureComponent<{}, ContextValue
   }
 
   private onSizeChanged = (element: HTMLElement) => {
-    this.setState({ size: getSize(element) })
+    fastdom.clear(this.measureID);
+
+    this.measureID = fastdom.measure(() => {
+      const size = getSize(element);
+      this.updateSize(size)
+    })
+  };
+
+  private updateSize = (size: Size) => {
+    fastdom.clear(this.mutateID);
+
+    this.mutateID = fastdom.mutate(() => {
+      this.setState({ size: size })
+    })
   };
 
   private getElement() {

yarn.lock

@@ -188,6 +188,13 @@ esutils@^2.0.2:
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
   integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
 
+fastdom@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/fastdom/-/fastdom-1.0.9.tgz#b395fab11a3701173c02a054fe769d8f596a0a26"
+  integrity sha512-SSp4fbVzu8JkkG01NUX+0iOwe9M5PN3MGIQ84txLf4TkkJG4q30khkzumKgi4hUqO1+jX6wLHfnCPoZ6eSZ6Tg==
+  dependencies:
+    strictdom "^1.0.1"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -357,6 +364,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+strictdom@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strictdom/-/strictdom-1.0.1.tgz#189de91649f73d44d59b8432efa68ef9d2659460"
+  integrity sha1-GJ3pFkn3PUTVm4Qy76aO+dJllGA=
+
 strip-ansi@^3.0.0:
   version "3.0.1"
   resolved "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"