extract always visible logic to RoomList

src/components/views/rooms/RoomList.tsx

@@ -86,6 +86,10 @@ const TAG_ORDER: TagID[] = [
     DefaultTagID.Archived,
 ];
 const CUSTOM_TAGS_BEFORE_TAG = DefaultTagID.LowPriority;
+const ALWAYS_VISIBLE_TAGS: TagID[] = [
+    DefaultTagID.DM,
+    DefaultTagID.Untagged,
+];
 
 interface ITagAesthetics {
     sectionLabel: string;
@@ -526,6 +530,9 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 : this.tagAesthetics[orderedTagId];
             if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
 
+            // The cost of mounting/unmounting this component all the time
+            // offsets the memory cost of keeping it at all time and hiding
+            // it when no results are found
             components.push(<RoomSublist
                 key={`sublist-${orderedTagId}`}
                 tagId={orderedTagId}
@@ -539,6 +546,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 onResize={this.props.onResize}
                 showSkeleton={showSkeleton}
                 extraTiles={extraTiles}
+                alwaysVisible={!ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
             />);
         }
 

src/components/views/rooms/RoomSublist.tsx

@@ -60,11 +60,6 @@ export const HEADER_HEIGHT = 32; // As defined by CSS
 
 const MAX_PADDING_HEIGHT = SHOW_N_BUTTON_HEIGHT + RESIZE_HANDLE_HEIGHT;
 
-const ALWAYS_VISIBLE_TAGS: TagID[] = [
-    DefaultTagID.DM,
-    DefaultTagID.Untagged,
-];
-
 // HACK: We really shouldn't have to do this.
 polyfillTouchEvent();
 
@@ -79,6 +74,7 @@ interface IProps {
     tagId: TagID;
     onResize: () => void;
     showSkeleton?: boolean;
+    alwaysVisible?: boolean;
 
     extraTiles?: ReactComponentElement<typeof ExtraTile>[];
 
@@ -767,7 +763,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             'mx_RoomSublist': true,
             'mx_RoomSublist_hasMenuOpen': !!this.state.contextMenuPosition,
             'mx_RoomSublist_minimized': this.props.isMinimized,
-            'mx_RoomSublist_hidden': !this.state.rooms.length && !ALWAYS_VISIBLE_TAGS.includes(this.props.tagId),
+            'mx_RoomSublist_hidden': !this.state.rooms.length && this.props.alwaysVisible !== true,
         });
 
         let content = null;