From 26df779330fa6368579e1fabd5f21441d9ea883f Mon Sep 17 00:00:00 2001
From: Amit Uttam <changingrainbows@gmail.com>
Date: Fri, 7 Feb 2020 18:13:44 -0300
Subject: [PATCH] MM-22253 Reduce unnecessary re-renders in channel switching
 (#3900)

Re-renders were occuring because of prop and state updates that created new object references, despite being of identical value. A key culprit was `postListHeight` in `PostList` which goes through a few calls to `handleContentSizeChange` when loading posts.

Also, "New Messages" divider line is a pure component now (via `memo`) to reduce unnecessary re-renders here too.
---
 .../post_list/new_messages_divider.js         |  4 ++--
 app/components/post_list/post_list.js         | 22 ++++++++++++-------
 .../channel_post_list/channel_post_list.js    |  4 +++-
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/components/post_list/new_messages_divider.js b/app/components/post_list/new_messages_divider.js
index 1e87f2457..a06f6abfc 100644
--- a/app/components/post_list/new_messages_divider.js
+++ b/app/components/post_list/new_messages_divider.js
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo} from 'react';
 import PropTypes from 'prop-types';
 import {
     View,
@@ -71,4 +71,4 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     };
 });
 
-export default NewMessagesDivider;
+export default memo(NewMessagesDivider);
diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js
index 68905c3da..d588c34c9 100644
--- a/app/components/post_list/post_list.js
+++ b/app/components/post_list/post_list.js
@@ -167,12 +167,14 @@ export default class PostList extends PureComponent {
     };
 
     handleContentSizeChange = (contentWidth, contentHeight) => {
-        this.setState({contentHeight}, () => {
-            if (this.state.postListHeight && contentHeight < this.state.postListHeight && this.props.extraData) {
-                // We still have less than 1 screen of posts loaded with more to get, so load more
-                this.props.onLoadMoreUp();
-            }
-        });
+        if (this.state.contentHeight !== contentHeight) {
+            this.setState({contentHeight}, () => {
+                if (this.state.postListHeight && contentHeight < this.state.postListHeight && this.props.extraData) {
+                    // We still have less than 1 screen of posts loaded with more to get, so load more
+                    this.props.onLoadMoreUp();
+                }
+            });
+        }
     };
 
     handleDeepLink = (url) => {
@@ -203,7 +205,9 @@ export default class PostList extends PureComponent {
 
     handleLayout = (event) => {
         const {height} = event.nativeEvent.layout;
-        this.setState({postListHeight: height});
+        if (this.state.postListHeight !== height) {
+            this.setState({postListHeight: height});
+        }
     };
 
     errorBadTeam = () => {
@@ -399,7 +403,9 @@ export default class PostList extends PureComponent {
     resetPostList = () => {
         this.contentOffsetY = 0;
         this.hasDoneInitialScroll = false;
-        this.setState({contentHeight: 0});
+        if (this.state.contentHeight !== 0) {
+            this.setState({contentHeight: 0});
+        }
     }
 
     scrollToIndex = (index) => {
diff --git a/app/screens/channel/channel_post_list/channel_post_list.js b/app/screens/channel/channel_post_list/channel_post_list.js
index 9549a38a1..752105eed 100644
--- a/app/screens/channel/channel_post_list/channel_post_list.js
+++ b/app/screens/channel/channel_post_list/channel_post_list.js
@@ -84,7 +84,9 @@ export default class ChannelPostList extends PureComponent {
             this.isLoadingMoreTop = false;
         }
 
-        this.setState({visiblePostIds});
+        if (this.state.visiblePostIds !== visiblePostIds) {
+            this.setState({visiblePostIds});
+        }
     }
 
     componentDidUpdate(prevProps) {