fix(StickyPlaceholder): do not recalculate placeholder rect on scroll

The Placeholder component did update and therefore recalculates rects every time when a Sticky/ StickyScrollUp component was rerendered and therefore forces layout which results in bad performance.
With this fix the component will still rerender on an update but will not force layouts anymore.

Author: garthenweb

lib/Sticky.tsx

@@ -148,15 +148,30 @@ class Sticky extends React.PureComponent<IProps, IState> {
     });
   };
 
+  renderSticky = ({ isRecalculating }) => {
+    const { children, disabled, stickyProps } = this.props;
+    return (
+      <StickyElement<
+        TRenderChildren<{
+          isSticky: boolean;
+          isDockedToBottom: boolean;
+        }>
+      >
+        forwardRef={this.stickyRef}
+        positionStyle={this.state.styles}
+        disabled={disabled || isRecalculating}
+        children={children}
+        renderArgs={{
+          isSticky: this.state.isSticky,
+          isDockedToBottom: this.state.isDockedToBottom,
+        }}
+        {...stickyProps}
+      />
+    );
+  };
+
   render() {
-    const {
-      children,
-      disabled,
-      disableResizing,
-      stickyProps,
-      style,
-      className,
-    } = this.props;
+    const { disabled, disableResizing, style, className } = this.props;
     return (
       <>
         <StickyPlaceholder
@@ -167,24 +182,7 @@ class Sticky extends React.PureComponent<IProps, IState> {
           stickyRef={this.stickyRef}
           disableResizing={disableResizing}
         >
-          {({ isRecalculating }) => (
-            <StickyElement<
-              TRenderChildren<{
-                isSticky: boolean;
-                isDockedToBottom: boolean;
-              }>
-            >
-              forwardRef={this.stickyRef}
-              positionStyle={this.state.styles}
-              disabled={disabled || isRecalculating}
-              children={children}
-              renderArgs={{
-                isSticky: this.state.isSticky,
-                isDockedToBottom: this.state.isDockedToBottom,
-              }}
-              {...stickyProps}
-            />
-          )}
+          {this.renderSticky}
         </StickyPlaceholder>
         <ObserveViewport
           disableDimensionsUpdates

lib/StickyPlaceholder.tsx

@@ -23,7 +23,7 @@ interface IState {
   clientSize: string | null;
 }
 
-class StickyPlaceholder extends React.PureComponent<IProps, IState> {
+class StickyPlaceholder extends React.Component<IProps, IState> {
   static defaultProps = {
     style: {},
   };
@@ -43,25 +43,36 @@ class StickyPlaceholder extends React.PureComponent<IProps, IState> {
     }
   }
 
-  static getDerivedStateFromProps(props: IProps, state: IState): IState {
+  static getDerivedStateFromProps(props: IProps, state: IState): IState | null {
+    const nextClientSize = `${props.dimensions.width}`;
+    if (state.isRecalculating) {
+      const stickyRect = props.stickyRef.current.getBoundingClientRect();
+      return {
+        stickyHeight: stickyRect.height,
+        stickyWidth: stickyRect.width,
+        clientSize: nextClientSize,
+        isRecalculating: false,
+      };
+    }
+
     if (!props.stickyRef.current) {
       return {
         ...state,
         isRecalculating: true,
       };
     }
 
-    const stickyRect = props.stickyRef.current.getBoundingClientRect();
-    const nextClientSize = `${props.dimensions.width}`;
-    const shouldRecalculate =
+    const triggerRecalculation =
       !props.disableResizing && state.clientSize !== nextClientSize;
 
-    return {
-      stickyHeight: stickyRect.height,
-      stickyWidth: stickyRect.width,
-      clientSize: nextClientSize,
-      isRecalculating: shouldRecalculate,
-    };
+    if (triggerRecalculation) {
+      return {
+        ...state,
+        isRecalculating: true,
+      };
+    }
+
+    return null;
   }
 
   render() {

lib/StickyScrollUp.tsx

@@ -132,15 +132,21 @@ class StickyScrollUp extends React.PureComponent<IProps, IState> {
     });
   };
 
+  renderSticky = ({ isRecalculating }) => {
+    const { disabled, children, stickyProps } = this.props;
+    return (
+      <StickyElement<TRenderChildren<undefined>>
+        forwardRef={this.stickyRef}
+        positionStyle={this.state.styles}
+        disabled={disabled || isRecalculating}
+        children={children}
+        {...stickyProps}
+      />
+    );
+  };
+
   render() {
-    const {
-      children,
-      disabled,
-      disableResizing,
-      stickyProps,
-      style,
-      className,
-    } = this.props;
+    const { disabled, disableResizing, style, className } = this.props;
     return (
       <>
         <StickyPlaceholder
@@ -150,15 +156,7 @@ class StickyScrollUp extends React.PureComponent<IProps, IState> {
           stickyRef={this.stickyRef}
           disableResizing={disableResizing}
         >
-          {({ isRecalculating }) => (
-            <StickyElement<TRenderChildren<undefined>>
-              forwardRef={this.stickyRef}
-              positionStyle={this.state.styles}
-              disabled={disabled || isRecalculating}
-              children={children}
-              {...stickyProps}
-            />
-          )}
+          {this.renderSticky}
         </StickyPlaceholder>
         <ObserveViewport
           disableDimensionsUpdates