fix(*): ensure that all components are always mounted with a valid default state

Author: garthenweb

lib/ObserveViewport.tsx

@@ -95,13 +95,17 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
       this.props.onUpdate(nextViewport, layoutSnapshot);
     }
 
+    this.syncState(nextViewport);
+  };
+
+  syncState(nextViewport: IState) {
     if (this.props.children) {
       raf.cancel(this.tickId);
       this.tickId = raf(() => {
         this.setState(nextViewport);
       });
     }
-  };
+  }
 
   get optionNotifyScroll(): boolean {
     return !this.props.disableScrollUpdates;
@@ -115,6 +119,7 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
     addViewportChangeListener,
     removeViewportChangeListener,
     hasRootProviderAsParent,
+    getCurrentViewport,
   }: IContext): React.ReactNode => {
     if (!hasRootProviderAsParent) {
       warnNoContextAvailable('ObserveViewport');
@@ -147,6 +152,8 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
       },
     });
 
+    this.syncState(getCurrentViewport());
+
     return null;
   };
 

lib/ViewportCollector.tsx

@@ -13,22 +13,7 @@ import {
 
 import { IDimensions, IScroll, IViewport, OnUpdateType } from './types';
 
-const getNodeScroll = (elem = window) => {
-  let { scrollX, scrollY } = elem;
-  if (scrollX === undefined) {
-    scrollX = elem.pageXOffset;
-  }
-  if (scrollY === undefined) {
-    scrollY = elem.pageYOffset;
-  }
-
-  return {
-    x: scrollX,
-    y: scrollY,
-  };
-};
-
-const getClientDimensions = (): IDimensions => {
+export const getClientDimensions = (): IDimensions => {
   if (!document || !document.documentElement) {
     return createEmptyDimensionState();
   }
@@ -53,6 +38,56 @@ const getClientDimensions = (): IDimensions => {
   };
 };
 
+const getNodeScroll = (elem = window) => {
+  let { scrollX, scrollY } = elem;
+  if (scrollX === undefined) {
+    scrollX = elem.pageXOffset;
+  }
+  if (scrollY === undefined) {
+    scrollY = elem.pageYOffset;
+  }
+
+  return {
+    x: scrollX,
+    y: scrollY,
+  };
+};
+
+export const getClientScroll = (
+  prevScrollState: IScroll = createEmptyScrollState(),
+) => {
+  if (typeof window === 'undefined') {
+    return createEmptyScrollState();
+  }
+  const { x, y } = getNodeScroll();
+  const nextScrollState = { ...prevScrollState };
+  const {
+    isScrollingLeft: prevIsScrollingLeft,
+    isScrollingUp: prevIsScrollingUp,
+    xTurn: prevXTurn,
+    yTurn: prevYTurn,
+  } = prevScrollState;
+
+  nextScrollState.isScrollingLeft = isScrollingLeft(x, nextScrollState);
+  nextScrollState.isScrollingRight = !nextScrollState.isScrollingLeft;
+
+  nextScrollState.isScrollingUp = isScrollingUp(y, nextScrollState);
+  nextScrollState.isScrollingDown = !nextScrollState.isScrollingUp;
+
+  nextScrollState.xTurn =
+    nextScrollState.isScrollingLeft === prevIsScrollingLeft ? prevXTurn : x;
+  nextScrollState.yTurn =
+    nextScrollState.isScrollingUp === prevIsScrollingUp ? prevYTurn : y;
+
+  nextScrollState.xDTurn = x - nextScrollState.xTurn;
+  nextScrollState.yDTurn = y - nextScrollState.yTurn;
+
+  nextScrollState.x = x;
+  nextScrollState.y = y;
+
+  return nextScrollState;
+};
+
 const isScrollingLeft = (x: number, prev: IScroll) => {
   switch (true) {
     case x < prev.x:
@@ -178,37 +213,12 @@ export default class ViewportCollector extends React.PureComponent<IProps> {
   };
 
   handleScroll = () => {
-    const { x, y } = getNodeScroll();
-    const {
-      isScrollingLeft: prevIsScrollingLeft,
-      isScrollingUp: prevIsScrollingUp,
-      xTurn: prevXTurn,
-      yTurn: prevYTurn,
-    } = this.scrollState;
-
-    this.scrollState.isScrollingLeft = isScrollingLeft(x, this.scrollState);
-    this.scrollState.isScrollingRight = !this.scrollState.isScrollingLeft;
-
-    this.scrollState.isScrollingUp = isScrollingUp(y, this.scrollState);
-    this.scrollState.isScrollingDown = !this.scrollState.isScrollingUp;
-
-    this.scrollState.xTurn =
-      this.scrollState.isScrollingLeft === prevIsScrollingLeft ? prevXTurn : x;
-    this.scrollState.yTurn =
-      this.scrollState.isScrollingUp === prevIsScrollingUp ? prevYTurn : y;
-
-    this.scrollState.xDTurn = x - this.scrollState.xTurn;
-    this.scrollState.yDTurn = y - this.scrollState.yTurn;
-
-    this.scrollState.x = x;
-    this.scrollState.y = y;
-
+    Object.assign(this.scrollState, getClientScroll(this.scrollState));
     this.componentMightHaveUpdated = true;
   };
 
   handleResize = () => {
     Object.assign(this.dimensionsState, getClientDimensions());
-
     this.componentMightHaveUpdated = true;
   };
 

lib/ViewportProvider.tsx

@@ -7,8 +7,8 @@ import {
   IViewportCollectorUpdateOptions,
 } from './types';
 import ViewportCollector, {
-  createEmptyScrollState,
-  createEmptyDimensionState,
+  getClientDimensions,
+  getClientScroll,
 } from './ViewportCollector';
 
 interface IProps {
@@ -22,10 +22,10 @@ interface IListener extends IViewportChangeOptions {
   skippedIterations: number;
 }
 
-const createEmptyViewport = (): IViewport => {
+const getCurrentDefaultViewport = (): IViewport => {
   return {
-    scroll: createEmptyScrollState(),
-    dimensions: createEmptyDimensionState(),
+    scroll: getClientScroll(),
+    dimensions: getClientDimensions(),
   };
 };
 
@@ -35,7 +35,7 @@ export const ViewportContext = React.createContext({
     handler: TViewportChangeHandler,
     options: IViewportChangeOptions,
   ) => {},
-  getCurrentViewport: createEmptyViewport,
+  getCurrentViewport: getCurrentDefaultViewport,
   hasRootProviderAsParent: false,
   version: '__VERSION__',
 });
@@ -189,7 +189,7 @@ export default class ViewportProvider extends React.PureComponent<
       removeViewportChangeListener: this.removeViewportChangeListener,
       getCurrentViewport: () => {
         if (!collector.current) {
-          return createEmptyViewport();
+          return getCurrentDefaultViewport();
         }
         return collector.current.getPropsFromState();
       },

lib/hooks.ts

@@ -80,6 +80,7 @@ export const useLayoutSnapshot = <T = any>(
   recalculateLayoutBeforeUpdate: (viewport: IViewport) => T,
   options: IFullOptions = {},
 ): null | T => {
+  const { getCurrentViewport } = useContext(ViewportContext);
   const [state, setSnapshot] = useState<null | T>(null);
   useViewportEffect(
     (viewport: IViewport, snapshot: T) => setSnapshot(snapshot),
@@ -88,5 +89,10 @@ export const useLayoutSnapshot = <T = any>(
       recalculateLayoutBeforeUpdate,
     },
   );
+
+  useEffect(() => {
+    setSnapshot(recalculateLayoutBeforeUpdate(getCurrentViewport()));
+  }, []);
+
   return state;
 };