Create a minimal view model

src/components/viewmodels/roomlist/RoomListViewModel.tsx

@@ -0,0 +1,18 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type { Room } from "matrix-js-sdk/src/matrix";
+import RoomListStoreV3 from "../../../stores/room-list-v3/RoomListStoreV3";
+
+export interface RoomListViewState {
+    rooms: Room[];
+}
+
+export function useRoomListViewModel(): RoomListViewState {
+    const rooms = RoomListStoreV3.instance.getSortedRooms();
+    return { rooms };
+}

src/components/views/rooms/RoomListView/RoomListView.tsx

@@ -6,11 +6,14 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import { AutoSizer, List } from "react-virtualized";
 
+import type { ListRowProps } from "react-virtualized";
 import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../settings/UIFeature";
 import { RoomListSearch } from "./RoomListSearch";
 import { RoomListHeaderView } from "./RoomListHeaderView";
+import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewModel";
 
 type RoomListViewProps = {
     /**
@@ -25,11 +28,31 @@ type RoomListViewProps = {
  */
 export const RoomListView: React.FC<RoomListViewProps> = ({ activeSpace }) => {
     const displayRoomSearch = shouldShowComponent(UIComponent.FilterContainer);
+    const { rooms } = useRoomListViewModel();
+
+    const rowRenderer = ({ key, index, style }: ListRowProps): React.JSX.Element => {
+        return (
+            <div key={key} style={style}>
+                {rooms[index].name}
+            </div>
+        );
+    };
 
     return (
         <section className="mx_RoomListView" data-testid="room-list-view">
             {displayRoomSearch && <RoomListSearch activeSpace={activeSpace} />}
             <RoomListHeaderView />
+            <AutoSizer>
+                {({ height, width }) => (
+                    <List
+                        rowRenderer={rowRenderer}
+                        rowCount={rooms.length}
+                        rowHeight={20}
+                        height={height}
+                        width={width}
+                    />
+                )}
+            </AutoSizer>
         </section>
     );
 };