Avoid excessive re-render of room list and member list (#31131)

* fix(list view): avoid re-create `onFocus` function at each render of the child items

* fix(room list): update `onFocus` signature

* fix(member list): update `onFocus` signature

* fix(room list): avoid re-render at the beginning and end of the scroll

* test(room list): remove scrolling test and props

* test(member list): update member tile view tests

* test(room list): update `ListView` focus test

* test(member list): add `onFocus` test for member list tile

src/components/utils/ListView.tsx

@@ -42,7 +42,7 @@ export interface IListViewProps<Item, Context>
         index: number,
         item: Item,
         context: ListContext<Context>,
-        onFocus: (e: React.FocusEvent) => void,
+        onFocus: (item: Item, e: React.FocusEvent) => void,
     ) => JSX.Element;
 
     /**
@@ -230,19 +230,26 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
         virtuosoDomRef.current = element;
     }, []);
 
-    const getItemComponentInternal = useCallback(
+    /**
-        (index: number, item: Item, context: ListContext<Context>): JSX.Element => {
+     * Focus handler passed to each item component.
-            const onFocus = (e: React.FocusEvent): void => {
+     * Don't declare inside getItemComponent to avoid re-creating on each render.
-                // If one of the item components has been focused directly, set the focused and tabIndex state
+     */
-                // and stop propagation so the ListViews onFocus doesn't also handle it.
+    const onFocusForGetItemComponent = useCallback(
-                const key = getItemKey(item);
+        (item: Item, e: React.FocusEvent) => {
-                setIsFocused(true);
+            // If one of the item components has been focused directly, set the focused and tabIndex state
-                setTabIndexKey(key);
+            // and stop propagation so the ListViews onFocus doesn't also handle it.
-                e.stopPropagation();
+            const key = getItemKey(item);
-            };
+            setIsFocused(true);
-            return getItemComponent(index, item, context, onFocus);
+            setTabIndexKey(key);
+            e.stopPropagation();
         },
-        [getItemComponent, getItemKey],
+        [getItemKey],
+    );
+
+    const getItemComponentInternal = useCallback(
+        (index: number, item: Item, context: ListContext<Context>): JSX.Element =>
+            getItemComponent(index, item, context, onFocusForGetItemComponent),
+        [getItemComponent, onFocusForGetItemComponent],
     );
     /**
      * Handles focus events on the list.

src/components/views/rooms/MemberList/MemberListView.tsx

@@ -45,7 +45,7 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
             index: number,
             item: MemberWithSeparator,
             context: ListContext<any>,
-            onFocus: (e: React.FocusEvent) => void,
+            onFocus: (item: MemberWithSeparator, e: React.FocusEvent) => void,
         ): JSX.Element => {
             const itemKey = getItemKey(item);
             const isRovingItem = itemKey === context.tabIndexKey;
@@ -55,6 +55,7 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
             } else if (item.member) {
                 return (
                     <RoomMemberTileView
+                        item={item}
                         member={item.member}
                         showPresence={isPresenceEnabled}
                         focused={focused}
@@ -67,6 +68,7 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
             } else {
                 return (
                     <ThreePidInviteTileView
+                        item={item}
                         threePidInvite={item.threePidInvite}
                         focused={focused}
                         tabIndex={isRovingItem ? 0 : -1}

src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx

@@ -16,15 +16,20 @@ import BaseAvatar from "../../../avatars/BaseAvatar";
 import { _t } from "../../../../../languageHandler";
 import { MemberTileView } from "./common/MemberTileView";
 import { InvitedIconView } from "./common/InvitedIconView";
+import { type MemberWithSeparator } from "../../../../viewmodels/memberlist/MemberListViewModel";
 
 interface IProps {
+    /**
+     * Needed for `onFocus`
+     */
+    item: MemberWithSeparator;
     member: RoomMember;
     index: number;
     memberCount: number;
     showPresence?: boolean;
     focused?: boolean;
     tabIndex?: number;
-    onFocus: (e: React.FocusEvent) => void;
+    onFocus: (item: MemberWithSeparator, e: React.FocusEvent) => void;
 }
 
 export function RoomMemberTileView(props: IProps): JSX.Element {
@@ -60,7 +65,7 @@ export function RoomMemberTileView(props: IProps): JSX.Element {
     return (
         <MemberTileView
             onClick={vm.onClick}
-            onFocus={props.onFocus}
+            onFocus={(e) => props.onFocus(props.item, e)}
             avatarJsx={av}
             presenceJsx={presenceJSX}
             nameJsx={nameJSX}

src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx

@@ -12,14 +12,19 @@ import { type ThreePIDInvite } from "../../../../../models/rooms/ThreePIDInvite"
 import BaseAvatar from "../../../avatars/BaseAvatar";
 import { MemberTileView } from "./common/MemberTileView";
 import { InvitedIconView } from "./common/InvitedIconView";
+import { type MemberWithSeparator } from "../../../../viewmodels/memberlist/MemberListViewModel";
 
 interface Props {
+    /**
+     * Needed for `onFocus`
+     */
+    item: MemberWithSeparator;
     threePidInvite: ThreePIDInvite;
     memberIndex: number;
     memberCount: number;
     focused?: boolean;
     tabIndex?: number;
-    onFocus: (e: React.FocusEvent) => void;
+    onFocus: (item: MemberWithSeparator, e: React.FocusEvent) => void;
 }
 
 export function ThreePidInviteTileView(props: Props): JSX.Element {
@@ -40,7 +45,7 @@ export function ThreePidInviteTileView(props: Props): JSX.Element {
             iconJsx={iconJsx}
             focused={props.focused}
             tabIndex={props.tabIndex}
-            onFocus={props.onFocus}
+            onFocus={(e) => props.onFocus(props.item, e)}
         />
     );
 }

src/components/views/rooms/RoomListPanel/RoomList.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { useCallback, useRef, useState, type JSX } from "react";
+import React, { useCallback, useRef, type JSX } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { type ScrollIntoViewLocation } from "react-virtuoso";
 import { isEqual } from "lodash";
@@ -44,7 +44,6 @@ export function RoomList({ vm: { roomsResult, activeIndex } }: RoomListProps): J
     const lastSpaceId = useRef<string | undefined>(undefined);
     const lastFilterKeys = useRef<FilterKey[] | undefined>(undefined);
     const roomCount = roomsResult.rooms.length;
-    const [isScrolling, setIsScrolling] = useState(false);
     const getItemComponent = useCallback(
         (
             index: number,
@@ -53,7 +52,7 @@ export function RoomList({ vm: { roomsResult, activeIndex } }: RoomListProps): J
                 spaceId: string;
                 filterKeys: FilterKey[] | undefined;
             }>,
-            onFocus: (e: React.FocusEvent) => void,
+            onFocus: (item: Room, e: React.FocusEvent) => void,
         ): JSX.Element => {
             const itemKey = item.roomId;
             const isRovingItem = itemKey === context.tabIndexKey;
@@ -69,11 +68,10 @@ export function RoomList({ vm: { roomsResult, activeIndex } }: RoomListProps): J
                     roomIndex={index}
                     roomCount={roomCount}
                     onFocus={onFocus}
-                    listIsScrolling={isScrolling}
                 />
             );
         },
-        [activeIndex, roomCount, isScrolling],
+        [activeIndex, roomCount],
     );
 
     const getItemKey = useCallback((item: Room): string => {
@@ -129,7 +127,6 @@ export function RoomList({ vm: { roomsResult, activeIndex } }: RoomListProps): J
             getItemKey={getItemKey}
             isItemFocusable={() => true}
             onKeyDown={keyDownCallback}
-            isScrolling={setIsScrolling}
             increaseViewportBy={{
                 bottom: EXTENDED_VIEWPORT_HEIGHT,
                 top: EXTENDED_VIEWPORT_HEIGHT,

src/components/views/rooms/RoomListPanel/RoomListItemView.tsx

@@ -16,7 +16,7 @@ import { NotificationDecoration } from "../NotificationDecoration";
 import { RoomAvatarView } from "../../avatars/RoomAvatarView";
 import { RoomListItemContextMenuView } from "./RoomListItemContextMenuView";
 
-interface RoomListItemViewProps extends React.HTMLAttributes<HTMLButtonElement> {
+interface RoomListItemViewProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "onFocus"> {
     /**
      * The room to display
      */
@@ -32,7 +32,7 @@ interface RoomListItemViewProps extends React.HTMLAttributes<HTMLButtonElement>
     /**
      * A callback that indicates the item has received focus
      */
-    onFocus: (e: React.FocusEvent) => void;
+    onFocus: (room: Room, e: React.FocusEvent) => void;
     /**
      * The index of the room in the list
      */
@@ -41,10 +41,6 @@ interface RoomListItemViewProps extends React.HTMLAttributes<HTMLButtonElement>
      * The total number of rooms in the list
      */
     roomCount: number;
-    /**
-     * Whether the list is currently scrolling
-     */
-    listIsScrolling: boolean;
 }
 
 /**
@@ -57,7 +53,6 @@ export const RoomListItemView = memo(function RoomListItemView({
     onFocus,
     roomIndex: index,
     roomCount: count,
-    listIsScrolling,
     ...props
 }: RoomListItemViewProps): JSX.Element {
     const ref = useRef<HTMLButtonElement>(null);
@@ -100,7 +95,7 @@ export const RoomListItemView = memo(function RoomListItemView({
             aria-selected={isSelected}
             aria-label={vm.a11yLabel}
             onClick={() => vm.openRoom()}
-            onFocus={onFocus}
+            onFocus={(e: React.FocusEvent<HTMLButtonElement>) => onFocus(room, e)}
             onMouseOver={() => setHover(true)}
             onMouseOut={() => setHover(false)}
             onBlur={() => setHover(false)}
@@ -148,9 +143,7 @@ export const RoomListItemView = memo(function RoomListItemView({
 
     // Rendering multiple context menus can causes crashes in radix upstream,
     // See https://github.com/radix-ui/primitives/issues/2717.
-    // We also don't need the context menu while scrolling so can improve scroll performance
+    if (!vm.showContextMenu) return content;
-    // by not rendering it.
-    if (!vm.showContextMenu || listIsScrolling) return content;
 
     return (
         <RoomListItemContextMenuView

test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx

@@ -129,7 +129,6 @@ describe("<RoomListItemView />", () => {
                 onFocus={jest.fn()}
                 roomIndex={0}
                 roomCount={1}
-                listIsScrolling={false}
             />,
         );
 
@@ -193,26 +192,4 @@ describe("<RoomListItemView />", () => {
         await user.keyboard("{Escape}");
         expect(screen.queryByRole("menu")).toBeNull();
     });
-
-    test("should not render context menu when list is scrolling", async () => {
-        const user = userEvent.setup();
-
-        mocked(useRoomListItemViewModel).mockReturnValue({
-            ...defaultValue,
-            showContextMenu: true,
-        });
-
-        renderRoomListItem({
-            listIsScrolling: true,
-        });
-
-        const button = screen.getByRole("option", { name: `Open room ${room.name}` });
-        await user.pointer([{ target: button }, { keys: "[MouseRight]", target: button }]);
-
-        // Context menu should not appear when scrolling
-        expect(screen.queryByRole("menu")).toBeNull();
-
-        // But the room item itself should still be rendered
-        expect(button).toBeInTheDocument();
-    });
 });

test/unit-tests/components/views/rooms/memberlist/MemberTileView-test.tsx

@@ -17,13 +17,16 @@ import * as TestUtils from "../../../../../test-utils";
 import { type RoomMember } from "../../../../../../src/models/rooms/RoomMember";
 import {
     getPending3PidInvites,
+    type MemberWithSeparator,
     sdkRoomMemberToRoomMember,
 } from "../../../../../../src/components/viewmodels/memberlist/MemberListViewModel";
 import { RoomMemberTileView } from "../../../../../../src/components/views/rooms/MemberList/tiles/RoomMemberTileView";
 import { ThreePidInviteTileView } from "../../../../../../src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView";
+import { type ThreePIDInvite } from "../../../../../../src/models/rooms/ThreePIDInvite";
 
 describe("MemberTileView", () => {
     describe("RoomMemberTileView", () => {
+        const item = {} as { member: RoomMember };
         let matrixClient: MatrixClient;
         let member: RoomMember;
 
@@ -32,11 +35,12 @@ describe("MemberTileView", () => {
             mocked(matrixClient.isRoomEncrypted).mockReturnValue(true);
             const sdkMember = new SdkRoomMember("roomId", matrixClient.getUserId()!);
             member = sdkRoomMemberToRoomMember(sdkMember)!.member!;
+            item.member = member;
         });
 
         it("should not display an E2EIcon when the e2E status = normal", () => {
             const { container } = render(
-                <RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
+                <RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
             );
             const e2eIcon = container.querySelector(".mx_E2EIconView");
             expect(e2eIcon).toBeNull();
@@ -50,7 +54,7 @@ describe("MemberTileView", () => {
             } as unknown as UserVerificationStatus);
 
             const { container } = render(
-                <RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
+                <RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
             );
             await waitFor(async () => {
                 await userEvent.hover(container.querySelector(".mx_E2EIcon")!);
@@ -73,7 +77,7 @@ describe("MemberTileView", () => {
             } as DeviceVerificationStatus);
 
             const { container } = render(
-                <RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
+                <RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
             );
 
             await waitFor(async () => {
@@ -88,33 +92,46 @@ describe("MemberTileView", () => {
         it("renders user labels correctly", async () => {
             member.powerLevel = 50;
             const { container: container1 } = render(
-                <RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
+                <RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
             );
             expect(container1).toHaveTextContent("Moderator");
 
             member.powerLevel = 100;
             const { container: container2 } = render(
-                <RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
+                <RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
             );
             expect(container2).toHaveTextContent("Admin");
 
             member.powerLevel = Infinity;
             const { container: container3 } = render(
-                <RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
+                <RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
             );
             expect(container3).toHaveTextContent("Owner");
 
             member.isInvite = true;
             const { container: container4 } = render(
-                <RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
+                <RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
             );
             expect(container4).toHaveTextContent("Invited");
         });
+
+        it("should call onFocus handler when focused", async () => {
+            const user = userEvent.setup();
+            const onFocus = jest.fn();
+            render(<RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={onFocus} />);
+
+            const button = screen.getByRole("option", { name: member.userId });
+            await user.click(button);
+
+            expect(onFocus).toHaveBeenCalledWith(item, expect.anything());
+        });
     });
 
     describe("ThreePidInviteTileView", () => {
+        const member = {} as MemberWithSeparator;
         let cli: MatrixClient;
         let room: Room;
+        let threePidInvite: ThreePIDInvite;
 
         beforeEach(() => {
             cli = TestUtils.stubClient();
@@ -123,13 +140,14 @@ describe("MemberTileView", () => {
                 TestUtils.mkThirdPartyInviteEvent(cli.getSafeUserId(), "Foobar", room.roomId),
                 { toStartOfTimeline: false, addToState: true },
             );
+            threePidInvite = getPending3PidInvites(room)[0].threePidInvite!;
         });
 
         it("renders ThreePidInvite correctly", async () => {
-            const [{ threePidInvite }] = getPending3PidInvites(room);
             const { container } = render(
                 <ThreePidInviteTileView
-                    threePidInvite={threePidInvite!}
+                    item={member}
+                    threePidInvite={threePidInvite}
                     memberIndex={0}
                     memberCount={1}
                     onFocus={jest.fn()}
@@ -137,5 +155,24 @@ describe("MemberTileView", () => {
             );
             expect(container).toMatchSnapshot();
         });
+
+        it("should call onFocus handler when focused", async () => {
+            const user = userEvent.setup();
+            const onFocus = jest.fn();
+            render(
+                <ThreePidInviteTileView
+                    item={member}
+                    threePidInvite={threePidInvite}
+                    memberIndex={0}
+                    memberCount={1}
+                    onFocus={onFocus}
+                />,
+            );
+
+            const button = screen.getByRole("option", { name: threePidInvite.event.getContent().display_name });
+            await user.click(button);
+
+            expect(onFocus).toHaveBeenCalledWith(member, expect.anything());
+        });
     });
 });

test/unit-tests/components/views/utils/ListView-test.tsx

@@ -363,7 +363,12 @@ describe("ListView", () => {
             const mockOnClick = jest.fn();
 
             mockGetItemComponent.mockImplementation(
-                (index: number, item: TestItemWithSeparator, context: any, onFocus: (e: React.FocusEvent) => void) => {
+                (
+                    index: number,
+                    item: TestItemWithSeparator,
+                    context: any,
+                    onFocus: (item: TestItemWithSeparator, e: React.FocusEvent) => void,
+                ) => {
                     const itemKey = typeof item === "string" ? item : item.id;
                     const isFocused = context.tabIndexKey === itemKey;
                     return (
@@ -372,7 +377,7 @@ describe("ListView", () => {
                             data-testid={`row-${index}`}
                             tabIndex={isFocused ? 0 : -1}
                             onClick={() => mockOnClick(item)}
-                            onFocus={onFocus}
+                            onFocus={(e) => onFocus(item, e)}
                         >
                             {item === SEPARATOR_ITEM ? "---" : (item as TestItem).name}
                         </div>