[FIX] Unnecessary rooms list render on focus (#1226)

app/views/RoomsListView/index.js

@@ -164,12 +164,19 @@ class RoomsListView extends React.Component {
 			width
 		};
 		Orientation.unlockAllOrientations();
+		this.willFocusListener = props.navigation.addListener('willFocus', () => {
+			// Check if there were changes while not focused (it's set on sCU)
+			if (this.shouldUpdate) {
+				animateNextTransition();
+				this.forceUpdate();
+				this.shouldUpdate = false;
+			}
+		});
 		this.didFocusListener = props.navigation.addListener('didFocus', () => {
 			BackHandler.addEventListener(
 				'hardwareBackPress',
 				this.handleBackPress
 			);
-			this.forceUpdate();
 		});
 		this.willBlurListener = props.navigation.addListener('willBlur', () => BackHandler.addEventListener(
 			'hardwareBackPress',
@@ -204,12 +211,22 @@ class RoomsListView extends React.Component {
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {
+		const { allChats } = this.state;
 		// eslint-disable-next-line react/destructuring-assignment
 		const propsUpdated = shouldUpdateProps.some(key => nextProps[key] !== this.props[key]);
 		if (propsUpdated) {
 			return true;
 		}
 
+		// Compare changes only once
+		const chatsNotEqual = !isEqual(nextState.allChats, allChats);
+
+		// If they aren't equal, set to update if focused
+		if (chatsNotEqual) {
+			this.shouldUpdate = true;
+		}
+
+		// Abort if it's not focused
 		if (!nextProps.navigation.isFocused()) {
 			return false;
 		}
@@ -218,7 +235,6 @@ class RoomsListView extends React.Component {
 			loading,
 			searching,
 			width,
-			allChats,
 			search
 		} = this.state;
 		if (nextState.loading !== loading) {
@@ -233,7 +249,9 @@ class RoomsListView extends React.Component {
 		if (!isEqual(nextState.search, search)) {
 			return true;
 		}
-		if (!isEqual(nextState.allChats, allChats)) {
+		// If it's focused and there are changes, update
+		if (chatsNotEqual) {
+			this.shouldUpdate = false;
 			return true;
 		}
 		return false;
@@ -275,6 +293,9 @@ class RoomsListView extends React.Component {
 		if (this.querySubscription && this.querySubscription.unsubscribe) {
 			this.querySubscription.unsubscribe();
 		}
+		if (this.willFocusListener && this.willFocusListener.remove) {
+			this.willFocusListener.remove();
+		}
 		if (this.didFocusListener && this.didFocusListener.remove) {
 			this.didFocusListener.remove();
 		}