Optimize scrollbars to render only on props/state changes

1 files changed, 18 insertions, 0 deletions

diff --git a/gui/packages/desktop/src/renderer/components/CustomScrollbars.js b/gui/packages/desktop/src/renderer/components/CustomScrollbars.js
index 00cad9bc5c..c6e5c09afe 100644
--- a/gui/packages/desktop/src/renderer/components/CustomScrollbars.js
+++ b/gui/packages/desktop/src/renderer/components/CustomScrollbars.js
@@ -92,6 +92,24 @@ export default class CustomScrollbars extends React.Component<Props, State> {
     }
   }
 
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    const prevProps = this.props;
+    const prevState = this.state;
+
+    return (
+      prevProps.children !== nextProps.children ||
+      prevProps.autoHide !== nextProps.autoHide ||
+      prevProps.trackPadding.x !== nextProps.trackPadding.x ||
+      prevProps.trackPadding.y !== nextProps.trackPadding.y ||
+      prevState.canScroll !== nextState.canScroll ||
+      prevState.showScrollIndicators !== nextState.showScrollIndicators ||
+      prevState.showTrack !== nextState.showTrack ||
+      prevState.isTrackHovered !== nextState.isTrackHovered ||
+      prevState.isDragging !== nextState.isDragging ||
+      prevState.isWide !== nextState.isWide
+    );
+  }
+
   componentWillUnmount() {
     this._stopAutoHide();