Improve performance of RoomContext in RoomHeader (#28574)

* Improve performance of RoomContext in RoomHeader

This allows a component to subscribe to only part of the RoomContext so they do not need to re-render on every single change

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

* Update tests

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

* Prettier

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

* Iterate

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

* Add comment

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

---------

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

src/components/structures/ThreadPanel.tsx

@@ -20,7 +20,7 @@ import MatrixClientContext, { useMatrixClientContext } from "../../contexts/Matr
 import { _t } from "../../languageHandler";
 import { ContextMenuButton } from "../../accessibility/context_menu/ContextMenuButton";
 import ContextMenu, { ChevronFace, MenuItemRadio, useContextMenu } from "./ContextMenu";
-import RoomContext, { TimelineRenderingType, useRoomContext } from "../../contexts/RoomContext";
+import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 import TimelinePanel from "./TimelinePanel";
 import { Layout } from "../../settings/enums/Layout";
 import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
@@ -30,6 +30,7 @@ import { ButtonEvent } from "../views/elements/AccessibleButton";
 import Spinner from "../views/elements/Spinner";
 import { clearRoomNotification } from "../../utils/notifications";
 import EmptyState from "../views/right_panel/EmptyState";
+import { ScopedRoomContextProvider, useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";
 
 interface IProps {
     roomId: string;
@@ -68,7 +69,7 @@ export const ThreadPanelHeader: React.FC<{
     setFilterOption: (filterOption: ThreadFilterType) => void;
 }> = ({ filterOption, setFilterOption }) => {
     const mxClient = useMatrixClientContext();
-    const roomContext = useRoomContext();
+    const roomContext = useScopedRoomContext("room");
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu<HTMLElement>();
     const options: readonly ThreadPanelHeaderOption[] = [
         {
@@ -184,13 +185,11 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
     }, [timelineSet, timelinePanel]);
 
     return (
-        <RoomContext.Provider
-            value={{
-                ...roomContext,
-                timelineRenderingType: TimelineRenderingType.ThreadsList,
-                showHiddenEvents: true,
-                narrow,
-            }}
+        <ScopedRoomContextProvider
+            {...roomContext}
+            timelineRenderingType={TimelineRenderingType.ThreadsList}
+            showHiddenEvents={true}
+            narrow={narrow}
         >
             <BaseCard
                 header={
@@ -241,7 +240,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                     </div>
                 )}
             </BaseCard>
-        </RoomContext.Provider>
+        </ScopedRoomContextProvider>
     );
 };
 export default ThreadPanel;