Memoise ListView context (#31668)

* Update npm non-major dependencies

* Make types happier

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Memoise ListView context

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Discard changes to yarn.lock

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

src/components/utils/ListView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useRef, type JSX, useCallback, useEffect, useState } from "react";
+import React, { useRef, type JSX, useCallback, useEffect, useState, useMemo } from "react";
 import { type VirtuosoHandle, type ListRange, Virtuoso, type VirtuosoProps } from "react-virtuoso";
 
 import { isModifiedKeyEvent, Key } from "../../Keyboard";
@@ -293,11 +293,14 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
         }
     }, []);
 
-    const listContext: ListContext<Context> = {
+    const listContext: ListContext<Context> = useMemo(
-        tabIndexKey: tabIndexKey,
+        () => ({
-        focused: isFocused,
+            tabIndexKey: tabIndexKey,
-        context: props.context || ({} as Context),
+            focused: isFocused,
-    };
+            context: props.context || ({} as Context),
+        }),
+        [tabIndexKey, isFocused, props.context],
+    );
 
     return (
         <Virtuoso

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, type JSX } from "react";
+import React, { useCallback, useRef, type JSX, useMemo } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { isEqual } from "lodash";
 
@@ -112,10 +112,14 @@ export function RoomList({ vm: { roomsResult, activeIndex } }: RoomListProps): J
             return;
         }
     }, []);
+    const context = useMemo<Context>(
+        () => ({ spaceId: roomsResult.spaceId, filterKeys: roomsResult.filterKeys }),
+        [roomsResult.spaceId, roomsResult.filterKeys],
+    );
 
     return (
         <ListView
-            context={{ spaceId: roomsResult.spaceId, filterKeys: roomsResult.filterKeys }}
+            context={context}
             scrollIntoViewOnChange={scrollIntoViewOnChange}
             initialTopMostItemIndex={activeIndex}
             data-testid="room-list"