feat(ObserveViewport): reduce cpu usage on idle

The CPU usage on low level devices was in some situations up to 50% all the time because every
ObserveViewport component on the page did its own calculations whether to update or not.
The work performed by those components was always the same. To reduce the stress on the CPU
the Provider component now does all the required work and notifies its children as soon as
something changes.
To make this performant it was required to wrap the setState function of the ObserveViewport
components, which then rerenders children if required, into another requestAnimationFrame which
is considered an breaking change (even if I was not able to see any differences within the examples).
The onUpdate property is still fired on the first update and should anyhow be used in performance
heavy situations.

Author: garthenweb

lib/ObserveViewport.tsx

@@ -1,41 +1,46 @@
 import * as React from 'react';
-const memoizeOne = require('memoize-one');
-const memoize =
-  typeof memoizeOne === 'function' ? memoizeOne : memoizeOne.default;
 const raf = require('raf');
 
-import { shallowEqualScroll, shallowEqualDimensions } from './utils';
-import { IScroll, IDimensions } from './types';
-
 import {
   Consumer,
-  createInitScrollState,
   createInitDimensionsState,
-  IScroll as IContextScroll,
-  SCROLL_DIR_UP,
-  SCROLL_DIR_DOWN,
-  SCROLL_DIR_RIGHT,
-  SCROLL_DIR_LEFT,
+  createInitScrollState,
 } from './ViewportProvider';
-
-interface IState extends IContextScroll, IDimensions {}
+import {
+  IScroll,
+  IDimensions,
+  IViewport,
+  TViewportChangeHandler,
+} from './types';
 
 export interface IChildProps {
   scroll: IScroll | null;
   dimensions: IDimensions | null;
 }
 
+interface IState extends IChildProps {}
+
 interface IProps {
   children?: (props: IChildProps) => React.ReactNode;
   onUpdate?: (props: IChildProps) => void;
   disableScrollUpdates: boolean;
   disableDimensionsUpdates: boolean;
 }
 
+interface IContext {
+  addViewportChangeListener: (fn: TViewportChangeHandler) => void;
+  removeViewportChangeListener: (fn: TViewportChangeHandler) => void;
+}
+
 export default class ObserveViewport extends React.Component<IProps, IState> {
-  tickId: NodeJS.Timer;
-  scrollContext: IContextScroll;
-  dimensionsContext: IDimensions;
+  private addViewportChangeListener:
+    | ((fn: TViewportChangeHandler) => void)
+    | null;
+  private removeViewportChangeListener:
+    | ((fn: TViewportChangeHandler) => void)
+    | null;
+
+  private tickId: NodeJS.Timer;
 
   static defaultProps = {
     disableScrollUpdates: false,
@@ -44,100 +49,70 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
 
   constructor(props: IProps) {
     super(props);
-    this.scrollContext = createInitScrollState();
-    this.dimensionsContext = createInitDimensionsState();
     this.state = {
-      ...this.scrollContext,
-      ...this.dimensionsContext,
+      scroll: createInitScrollState(),
+      dimensions: createInitDimensionsState(),
     };
   }
 
   shouldComponentUpdate(nextProps: IProps) {
     return Boolean(nextProps.children);
   }
 
-  componentDidMount() {
-    this.tick(this.syncState);
-  }
-
   componentWillUnmount() {
+    if (this.removeViewportChangeListener) {
+      this.removeViewportChangeListener(this.handleViewportUpdate);
+    }
+    this.removeViewportChangeListener = null;
+    this.addViewportChangeListener = null;
     raf.cancel(this.tickId);
   }
 
-  getPublicScroll = memoize(
-    (scroll: IScroll): IScroll => scroll,
-    shallowEqualScroll,
-  );
-
-  getPublicDimensions = memoize(
-    (dimensions: IDimensions): IDimensions => dimensions,
-    shallowEqualDimensions,
-  );
-
-  storeContext = (scrollContext: {
-    scroll: IContextScroll;
-    dimensions: IDimensions;
-  }) => {
-    this.scrollContext = scrollContext.scroll;
-    this.dimensionsContext = scrollContext.dimensions;
-    return null;
-  };
+  handleViewportUpdate = (viewport: IViewport) => {
+    const scroll = this.props.disableScrollUpdates ? null : viewport.scroll;
+    const dimensions = this.props.disableDimensionsUpdates
+      ? null
+      : viewport.dimensions;
+    const nextViewport = {
+      scroll: scroll,
+      dimensions: dimensions,
+    };
+
+    if (this.props.onUpdate) {
+      this.props.onUpdate(nextViewport);
+    }
 
-  tick(updater: () => void) {
     this.tickId = raf(() => {
-      if (this) {
-        updater();
-        this.tick(updater);
-      }
+      this.setState(nextViewport);
     });
-  }
+  };
 
-  syncState = () => {
-    const { disableScrollUpdates, disableDimensionsUpdates } = this.props;
-    const nextState = {
-      ...this.scrollContext,
-      ...this.dimensionsContext,
-    };
-    const scrollDidUpdate = disableScrollUpdates
-      ? false
-      : !shallowEqualScroll(nextState as any, this.state as any);
-    const dimensionsDidUpdate = disableDimensionsUpdates
-      ? false
-      : !shallowEqualDimensions(nextState as any, this.state as any);
-
-    if (scrollDidUpdate || dimensionsDidUpdate) {
-      if (this.props.onUpdate) {
-        this.props.onUpdate(this.getPropsFromState(nextState));
-      }
-      this.setState(nextState);
+  registerViewportListeners = ({
+    addViewportChangeListener,
+    removeViewportChangeListener,
+  }: IContext): null => {
+    const shouldRegister =
+      this.removeViewportChangeListener !== removeViewportChangeListener &&
+      this.addViewportChangeListener !== addViewportChangeListener;
+
+    if (!shouldRegister) {
+      return null;
     }
-  };
 
-  getPropsFromState(state: IState = this.state) {
-    const { disableScrollUpdates, disableDimensionsUpdates } = this.props;
-    const { xDir, yDir, width, height, ...scroll } = state;
-    return {
-      scroll: disableScrollUpdates
-        ? null
-        : this.getPublicScroll({
-            ...scroll,
-            isScrollingUp: yDir === SCROLL_DIR_UP,
-            isScrollingDown: yDir === SCROLL_DIR_DOWN,
-            isScrollingLeft: xDir === SCROLL_DIR_LEFT,
-            isScrollingRight: xDir === SCROLL_DIR_RIGHT,
-          }),
-      dimensions: disableDimensionsUpdates
-        ? null
-        : this.getPublicDimensions({ width, height }),
-    };
-  }
+    if (this.removeViewportChangeListener) {
+      this.removeViewportChangeListener(this.handleViewportUpdate);
+    }
+    this.removeViewportChangeListener = removeViewportChangeListener;
+    addViewportChangeListener(this.handleViewportUpdate);
+    return null;
+  };
 
   render() {
     const { children } = this.props;
     return (
       <React.Fragment>
-        <Consumer>{this.storeContext}</Consumer>
-        {typeof children === 'function' && children(this.getPropsFromState())}
+        <Consumer>{this.registerViewportListeners}</Consumer>
+        {typeof children === 'function' && children(this.state)}
       </React.Fragment>
     );
   }