feat(*): improve performance by reading layout in one badge

Author: garthenweb

lib/Sticky.tsx

@@ -27,6 +27,11 @@ interface IState {
   styles: React.CSSProperties;
 }
 
+interface ILayoutSnapshot {
+  stickyRect: IRect;
+  containerRect: IRect;
+}
+
 class Sticky extends React.PureComponent<IProps, IState> {
   private stickyRef: React.RefObject<any> = React.createRef();
   private placeholderRef: React.RefObject<any> = React.createRef();
@@ -125,10 +130,19 @@ class Sticky extends React.PureComponent<IProps, IState> {
     return styles;
   }
 
-  handleScrollUpdate = () => {
+  recalculateLayoutBeforeUpdate = (): ILayoutSnapshot => {
     const stickyRect = this.stickyRef.current.getBoundingClientRect();
     const containerRect = this.container.current.getBoundingClientRect();
+    return {
+      stickyRect,
+      containerRect,
+    };
+  };
 
+  handleScrollUpdate = (
+    _: any,
+    { stickyRect, containerRect }: ILayoutSnapshot,
+  ) => {
     // in case children is not a function renderArgs will never be used
     const willRenderAsAFunction = typeof this.props.children === 'function';
 
@@ -187,6 +201,7 @@ class Sticky extends React.PureComponent<IProps, IState> {
         <ObserveViewport
           disableDimensionsUpdates
           onUpdate={this.handleScrollUpdate}
+          recalculateLayoutBeforeUpdate={this.recalculateLayoutBeforeUpdate}
         />
       </>
     );

lib/StickyScrollUp.tsx

@@ -113,8 +113,14 @@ class StickyScrollUp extends React.PureComponent<IProps, IState> {
     return styles;
   }
 
-  handleViewportUpdate = ({ scroll }: { scroll: IScroll }) => {
-    const stickyRect = this.stickyRef.current.getBoundingClientRect();
+  recalculateLayoutBeforeUpdate = (): IRect => {
+    return this.stickyRef.current.getBoundingClientRect();
+  };
+
+  handleViewportUpdate = (
+    { scroll }: { scroll: IScroll },
+    stickyRect: IRect,
+  ) => {
     const nextOffset = Math.max(stickyRect.bottom, 0);
     if (
       this.props.updateStickyOffset &&
@@ -161,6 +167,7 @@ class StickyScrollUp extends React.PureComponent<IProps, IState> {
         <ObserveViewport
           disableDimensionsUpdates
           onUpdate={this.handleViewportUpdate}
+          recalculateLayoutBeforeUpdate={this.recalculateLayoutBeforeUpdate}
         />
       </>
     );

package-lock.json

@@ -48,7 +48,7 @@
     "typescript": "^3.0.1"
   },
   "dependencies": {
-    "react-viewport-utils": "^1.0.0",
+    "react-viewport-utils": "^1.1.0",
     "recompose": "^0.30.0"
   },
   "peerDependencies": {