feat(ViewportProvider): reduce expensive calls to cancel animation fr…

…ame/ timeout
garthenweb · Oct 20, 2019 · 94c17fb · 94c17fb
1 parent 035e4e2
commit 94c17fb
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 33 deletions.
diff --git a/lib/ObserveViewport.tsx b/lib/ObserveViewport.tsx
@@ -57,7 +57,7 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
     handler: TViewportChangeHandler,
   ) => void;
 
-  private tickId: number;
+  private tickId?: number;
 
   static defaultProps: IProps = {
     disableScrollUpdates: false,
@@ -94,7 +94,9 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
     }
     this.removeViewportChangeListener = undefined;
     this.scheduleReinitializeChangeHandler = undefined;
-    cancelAnimationFrame(this.tickId);
+    if (typeof this.tickId === 'number') {
+      cancelAnimationFrame(this.tickId);
+    }
   }
 
   handleViewportUpdate = (viewport: IViewport, layoutSnapshot: unknown) => {
@@ -108,10 +110,12 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
   };
 
   syncState(nextViewport: IState) {
-    cancelAnimationFrame(this.tickId);
-    this.tickId = requestAnimationFrame(() => {
-      this.setState(nextViewport);
-    });
+    if (this.tickId === undefined) {
+      this.tickId = requestAnimationFrame(() => {
+        this.setState(nextViewport);
+        this.tickId = undefined;
+      });
+    }
   }
 
   get optionNotifyScroll(): boolean {

diff --git a/lib/ViewportProvider.tsx b/lib/ViewportProvider.tsx
@@ -114,6 +114,9 @@ export default class ViewportProvider extends React.PureComponent<
     if (typeof this.updateListenersTick === 'number') {
       clearTimeout(this.updateListenersTick);
     }
+    if (typeof this.initializeListenersTick === 'number') {
+      cancelAnimationFrame(this.initializeListenersTick);
+    }
   }
 
   triggerUpdateToListeners = (
@@ -234,35 +237,38 @@ export default class ViewportProvider extends React.PureComponent<
   };
 
   handleListenerUpdate() {
-    if (typeof this.updateListenersTick === 'number') {
-      clearTimeout(this.updateListenersTick);
+    if (this.updateListenersTick === undefined) {
+      this.updateListenersTick = setTimeout(() => {
+        const nextState = this.listeners.length !== 0;
+        if (this.state.hasListeners !== nextState) {
+          this.setState({
+            hasListeners: this.listeners.length !== 0,
+          });
+        }
+        this.updateListenersTick = undefined;
+      }, 1);
     }
-    if (typeof this.initializeListenersTick === 'number') {
-      cancelAnimationFrame(this.initializeListenersTick);
+    if (this.initializeListenersTick === undefined) {
+      this.initializeListenersTick = requestAnimationFrame(() => {
+        if (
+          this.collector.current &&
+          this.listeners.some(l => !l.initialized)
+        ) {
+          this.triggerUpdateToListeners(
+            this.collector.current.getPropsFromState(),
+            {
+              dimensionsDidUpdate: false,
+              scrollDidUpdate: false,
+            },
+            {
+              isIdle: false,
+              shouldInitialize: true,
+            },
+          );
+        }
+        this.initializeListenersTick = undefined;
+      });
     }
-    this.updateListenersTick = setTimeout(() => {
-      const nextState = this.listeners.length !== 0;
-      if (this.state.hasListeners !== nextState) {
-        this.setState({
-          hasListeners: this.listeners.length !== 0,
-        });
-      }
-    }, 1);
-    this.initializeListenersTick = requestAnimationFrame(() => {
-      if (this.collector.current && this.listeners.some(l => !l.initialized)) {
-        this.triggerUpdateToListeners(
-          this.collector.current.getPropsFromState(),
-          {
-            dimensionsDidUpdate: false,
-            scrollDidUpdate: false,
-          },
-          {
-            isIdle: false,
-            shouldInitialize: true,
-          },
-        );
-      }
-    });
   }
 
   private collector = React.createRef<ViewportCollector>();