Set rooms event listeners during the correct life cycle hook

src/components/views/rooms/RoomList.tsx

@@ -289,12 +289,11 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         // shallow-copy from the template as we need to make modifications to it
         this.tagAesthetics = objectShallowClone(TAG_AESTHETICS);
         this.updateDmAddRoomAction();
-
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
     }
 
     public componentDidMount(): void {
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
         SpaceStore.instance.on(SUGGESTED_ROOMS, this.updateSuggestedRooms);
         RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists);
         this.customTagStoreRef = CustomRoomTagStore.addListener(this.updateLists);

src/components/views/rooms/RoomSublist.tsx

@@ -125,8 +125,6 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         };
         // Why Object.assign() and not this.state.height? Because TypeScript says no.
         this.state = Object.assign(this.state, {height: this.calculateInitialHeight()});
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onListsUpdated);
     }
 
     private calculateInitialHeight() {
@@ -242,6 +240,11 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         return false;
     }
 
+    public componentDidMount() {
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onListsUpdated);
+    }
+
     public componentWillUnmount() {
         defaultDispatcher.unregister(this.dispatcherRef);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onListsUpdated);

src/components/views/rooms/RoomTile.tsx

@@ -97,22 +97,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             // generatePreview() will return nothing if the user has previews disabled
             messagePreview: this.generatePreview(),
         };
-
-        ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        MessagePreviewStore.instance.on(
-            MessagePreviewStore.getPreviewChangedEventName(this.props.room),
-            this.onRoomPreviewChanged,
-        );
-        this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
-        this.notificationState.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
-        this.roomProps = EchoChamber.forRoom(this.props.room);
-        this.roomProps.on(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
-        CommunityPrototypeStore.instance.on(
-            CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
-            this.onCommunityUpdate,
-        );
-        this.props.room.on("Room.name", this.onRoomNameUpdate);
     }
 
     private onRoomNameUpdate = (room) => {
@@ -167,6 +151,22 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         if (this.state.selected) {
             this.scrollIntoView();
         }
+
+        ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        MessagePreviewStore.instance.on(
+            MessagePreviewStore.getPreviewChangedEventName(this.props.room),
+            this.onRoomPreviewChanged,
+        );
+        this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
+        this.notificationState.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+        this.roomProps = EchoChamber.forRoom(this.props.room);
+        this.roomProps.on(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
+        this.roomProps.on("Room.name", this.onRoomNameUpdate);
+        CommunityPrototypeStore.instance.on(
+            CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
+            this.onCommunityUpdate,
+        );
     }
 
     public componentWillUnmount() {
@@ -182,8 +182,15 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             );
             this.props.room.off("Room.name", this.onRoomNameUpdate);
         }
+        ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
         defaultDispatcher.unregister(this.dispatcherRef);
         this.notificationState.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+        this.roomProps.off(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
+        this.roomProps.off("Room.name", this.onRoomNameUpdate);
+        CommunityPrototypeStore.instance.off(
+            CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
+            this.onCommunityUpdate,
+        );
     }
 
     private onAction = (payload: ActionPayload) => {
@@ -371,7 +378,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             return null;
         }
 
-        const state = this.roomProps.notificationVolume;
+        const state = this.roomProps?.notificationVolume;
 
         let contextMenu = null;
         if (this.state.notificationsMenuPosition) {
@@ -547,7 +554,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         />;
 
         let badge: React.ReactNode;
-        if (!this.props.isMinimized) {
+        if (!this.props.isMinimized && this.notificationState) {
             // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below
             badge = (
                 <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
@@ -576,7 +583,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         const nameClasses = classNames({
             "mx_RoomTile_name": true,
             "mx_RoomTile_nameWithPreview": !!messagePreview,
-            "mx_RoomTile_nameHasUnreadEvents": this.notificationState.isUnread,
+            "mx_RoomTile_nameHasUnreadEvents": this.notificationState?.isUnread,
         });
 
         let nameContainer = (
@@ -593,15 +600,15 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         // The following labels are written in such a fashion to increase screen reader efficiency (speed).
         if (this.props.tag === DefaultTagID.Invite) {
             // append nothing
-        } else if (this.notificationState.hasMentions) {
+        } else if (this.notificationState?.hasMentions) {
             ariaLabel += " " + _t("%(count)s unread messages including mentions.", {
                 count: this.notificationState.count,
             });
-        } else if (this.notificationState.hasUnreadCount) {
+        } else if (this.notificationState?.hasUnreadCount) {
             ariaLabel += " " + _t("%(count)s unread messages.", {
                 count: this.notificationState.count,
             });
-        } else if (this.notificationState.isUnread) {
+        } else if (this.notificationState?.isUnread) {
             ariaLabel += " " + _t("Unread messages.");
         }