fix(ViewportProvider): allow to update cache for fallback once per

second

It is actually possibe that the fallback needs to be accessed more than
once per session, e.g. when the listener count gets down to 0 and
increases afterwards again.
In this case the state should be recreated, but not for every component
that requests it.
The assumtion is, that this mostly happens on mount and the collector
should soon take over, therefore we define a limit of maximum one
request per second, to be up  to date but don't implement a performance
issue.

Fixes #10

Author: garthenweb

lib/ViewportProvider.tsx

@@ -10,7 +10,7 @@ import ViewportCollector, {
   getClientDimensions,
   getClientScroll,
 } from './ViewportCollector';
-import { createPerformanceMarker } from './utils';
+import { createPerformanceMarker, now } from './utils';
 
 interface IProps {
   experimentalSchedulerEnabled?: boolean;
@@ -23,26 +23,28 @@ interface IListener extends IViewportChangeOptions {
   skippedIterations: number;
 }
 
-const getCurrentDefaultViewport = (() => {
+const createFallbackViewportRequester = () => {
   let defaultValue: IViewport;
+  let lastAccess = 0;
   return (): IViewport => {
-    if (!defaultValue) {
+    if (!defaultValue || now() - lastAccess > 1000) {
       defaultValue = {
         scroll: getClientScroll(),
         dimensions: getClientDimensions(),
       };
+      lastAccess = now();
     }
     return defaultValue;
   };
-})();
+};
 
 export const ViewportContext = React.createContext({
   removeViewportChangeListener: (handler: TViewportChangeHandler) => {},
   addViewportChangeListener: (
     handler: TViewportChangeHandler,
     options: IViewportChangeOptions,
   ) => {},
-  getCurrentViewport: getCurrentDefaultViewport,
+  getCurrentViewport: createFallbackViewportRequester(),
   hasRootProviderAsParent: false,
   version: '__VERSION__',
 });
@@ -197,12 +199,13 @@ export default class ViewportProvider extends React.PureComponent<
   }
 
   private collector = React.createRef<ViewportCollector>();
+  private getCurrentDefaultViewport = createFallbackViewportRequester();
   private contextValue = {
     addViewportChangeListener: this.addViewportChangeListener,
     removeViewportChangeListener: this.removeViewportChangeListener,
     getCurrentViewport: () => {
       if (!this.collector.current) {
-        return getCurrentDefaultViewport();
+        return this.getCurrentDefaultViewport();
       }
       return this.collector.current.getPropsFromState();
     },

lib/utils.ts

@@ -187,7 +187,7 @@ export const cancelAnimationFrame = ((): ((handle: number) => void) => {
   return clearTimeout;
 })();
 
-const now =
+export const now =
   typeof performance !== 'undefined' && performance.now
     ? performance.now.bind(performance)
     : Date.now;