toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

MM-22253 Reduce unnecessary re-renders in channel switching (#3900)

Browse source 
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.
This commit is contained in:
Amit Uttam 2020-02-07 18:13:44 -03:00 committed by GitHub
parent cadec1b793
commit 26df779330
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/post_list/new_messages_divider.js
View file

@ -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);

22
app/components/post_list/post_list.js
View file

@ -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) => {

4
app/screens/channel/channel_post_list/channel_post_list.js
View file

@ -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) {