Also use `getJoinedMemberCount` as its capable of using the room summary member count instead

Leave the useRoomMembers hook for future use as it is very useful.

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -43,7 +43,7 @@ import RoomContext from "../../../contexts/RoomContext";
 import {UIFeature} from "../../../settings/UIFeature";
 import {ChevronFace, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
 import WidgetContextMenu from "../context_menus/WidgetContextMenu";
-import {useRoomMembers} from "../../../hooks/useRoomMembers";
+import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
 
 interface IProps {
     room: Room;
@@ -244,12 +244,12 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
         </div>
     </React.Fragment>;
 
-    const members = useRoomMembers(room);
+    const memberCount = useRoomMemberCount(room);
 
     return <BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
         <Group title={_t("About")} className="mx_RoomSummaryCard_aboutGroup">
             <Button className="mx_RoomSummaryCard_icon_people" onClick={onRoomMembersClick}>
-                {_t("%(count)s people", { count: members.length })}
+                {_t("%(count)s people", { count: memberCount })}
             </Button>
             <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
                 {_t("Show files")}

src/hooks/useRoomMembers.ts

@@ -29,3 +29,11 @@ export const useRoomMembers = (room: Room, throttleWait = 250) => {
     }, throttleWait, {leading: true, trailing: true}));
     return members;
 };
+
+export const useRoomMemberCount = (room: Room, throttleWait = 250) => {
+    const [count, setCount] = useState<number>(room.getJoinedMemberCount());
+    useEventEmitter(room.currentState, "RoomState.members", throttle(() => {
+        setCount(room.getJoinedMemberCount());
+    }, throttleWait, {leading: true, trailing: true}));
+    return count;
+};