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>
2024-12-02 09:49:52 +00:00 · 2024-12-02 09:49:52 +00:00 · b87437d439
commit b87437d439
parent 8619a22f57
56 changed files with 289 additions and 216 deletions
--- a/test/unit-tests/components/structures/MessagePanel-test.tsx
+++ b/test/unit-tests/components/structures/MessagePanel-test.tsx
@ -30,6 +30,7 @@ import {
 import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
 import { IRoomState } from "../../../../src/components/structures/RoomView";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
+import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomContext.tsx";

 jest.mock("../../../../src/utils/beacon", () => ({
    useBeacon: jest.fn(),
@ -91,9 +92,9 @@ describe("MessagePanel", function () {

    const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => (
        <MatrixClientContext.Provider value={client}>
-            <RoomContext.Provider value={{ ...defaultRoomContext, ...roomContext }}>
+            <ScopedRoomContextProvider {...defaultRoomContext} {...roomContext}>
                <MessagePanel {...defaultProps} {...props} />
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        </MatrixClientContext.Provider>
    );

--- a/test/unit-tests/components/structures/ThreadPanel-test.tsx
+++ b/test/unit-tests/components/structures/ThreadPanel-test.tsx
@ -20,7 +20,6 @@ import {

 import ThreadPanel, { ThreadFilterType, ThreadPanelHeader } from "../../../../src/components/structures/ThreadPanel";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../src/contexts/RoomContext";
 import { _t } from "../../../../src/languageHandler";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
@ -28,6 +27,7 @@ import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
 import { createTestClient, getRoomContext, mkRoom, mockPlatformPeg, stubClient } from "../../../test-utils";
 import { mkThread } from "../../../test-utils/threads";
 import { IRoomState } from "../../../../src/components/structures/RoomView";
+import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomContext.tsx";

 jest.mock("../../../../src/utils/Feedback");

@ -81,11 +81,11 @@ describe("ThreadPanel", () => {
                room: mockRoom,
            } as unknown as IRoomState;
            const { container } = render(
-                <RoomContext.Provider value={roomContextObject}>
+                <ScopedRoomContextProvider {...roomContextObject}>
                    <MatrixClientContext.Provider value={mockClient}>
                        <ThreadPanelHeader filterOption={ThreadFilterType.All} setFilterOption={() => undefined} />
                    </MatrixClientContext.Provider>
-                </RoomContext.Provider>,
+                </ScopedRoomContextProvider>,
            );
            fireEvent.click(getByRole(container, "button", { name: "Mark all as read" }));
            await waitFor(() =>
@ -114,8 +114,8 @@ describe("ThreadPanel", () => {

        const TestThreadPanel = () => (
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider
-                    value={getRoomContext(room, {
+                <ScopedRoomContextProvider
+                    {...getRoomContext(room, {
                        canSendMessages: true,
                    })}
                >
@ -125,7 +125,7 @@ describe("ThreadPanel", () => {
                        resizeNotifier={new ResizeNotifier()}
                        permalinkCreator={new RoomPermalinkCreator(room)}
                    />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>
        );

--- a/test/unit-tests/components/structures/ThreadView-test.tsx
+++ b/test/unit-tests/components/structures/ThreadView-test.tsx
@ -23,7 +23,6 @@ import React, { useState } from "react";

 import ThreadView from "../../../../src/components/structures/ThreadView";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../src/contexts/RoomContext";
 import { SdkContextClass } from "../../../../src/contexts/SDKContext";
 import { Action } from "../../../../src/dispatcher/actions";
 import dispatcher from "../../../../src/dispatcher/dispatcher";
@ -34,6 +33,7 @@ import { mockPlatformPeg } from "../../../test-utils/platform";
 import { getRoomContext } from "../../../test-utils/room";
 import { mkMessage, stubClient } from "../../../test-utils/test-utils";
 import { mkThread } from "../../../test-utils/threads";
+import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomContext.tsx";

 describe("ThreadView", () => {
    const ROOM_ID = "!roomId:example.org";
@ -51,8 +51,8 @@ describe("ThreadView", () => {

        return (
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider
-                    value={getRoomContext(room, {
+                <ScopedRoomContextProvider
+                    {...getRoomContext(room, {
                        canSendMessages: true,
                    })}
                >
@ -63,7 +63,7 @@ describe("ThreadView", () => {
                        initialEvent={initialEvent}
                        resizeNotifier={new ResizeNotifier()}
                    />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
                ,
            </MatrixClientContext.Provider>
        );
--- a/test/unit-tests/components/views/audio_messages/RecordingPlayback-test.tsx
+++ b/test/unit-tests/components/views/audio_messages/RecordingPlayback-test.tsx
@ -15,10 +15,11 @@ import RecordingPlayback, {
    PlaybackLayout,
 } from "../../../../../src/components/views/audio_messages/RecordingPlayback";
 import { Playback } from "../../../../../src/audio/Playback";
-import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import { createAudioContext } from "../../../../../src/audio/compat";
 import { flushPromises } from "../../../../test-utils";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 jest.mock("../../../../../src/WorkerManager", () => ({
    WorkerManager: jest.fn(() => ({
@ -56,9 +57,9 @@ describe("<RecordingPlayback />", () => {
    const defaultRoom = { roomId: "!room:server.org", timelineRenderingType: TimelineRenderingType.File } as IRoomState;
    const getComponent = (props: React.ComponentProps<typeof RecordingPlayback>, room = defaultRoom) =>
        render(
-            <RoomContext.Provider value={room}>
+            <ScopedRoomContextProvider {...room}>
                <RecordingPlayback {...props} />
-            </RoomContext.Provider>,
+            </ScopedRoomContextProvider>,
        );

    beforeEach(() => {
--- a/test/unit-tests/components/views/avatars/MemberAvatar-test.tsx
+++ b/test/unit-tests/components/views/avatars/MemberAvatar-test.tsx
@ -12,11 +12,11 @@ import { MatrixClient, PendingEventOrdering, Room, RoomMember } from "matrix-js-
 import React, { ComponentProps } from "react";

 import MemberAvatar from "../../../../../src/components/views/avatars/MemberAvatar";
-import RoomContext from "../../../../../src/contexts/RoomContext";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { getRoomContext } from "../../../../test-utils/room";
 import { stubClient } from "../../../../test-utils/test-utils";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("MemberAvatar", () => {
    const ROOM_ID = "roomId";
@ -27,9 +27,9 @@ describe("MemberAvatar", () => {

    function getComponent(props: Partial<ComponentProps<typeof MemberAvatar>>) {
        return (
-            <RoomContext.Provider value={getRoomContext(room, {})}>
+            <ScopedRoomContextProvider {...getRoomContext(room, {})}>
                <MemberAvatar member={null} size="35px" {...props} />
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        );
    }

--- a/test/unit-tests/components/views/context_menus/MessageContextMenu-test.tsx
+++ b/test/unit-tests/components/views/context_menus/MessageContextMenu-test.tsx
@ -27,7 +27,7 @@ import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";

 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import { canEditContent } from "../../../../../src/utils/EventUtils";
 import { copyPlaintext, getSelectedText } from "../../../../../src/utils/strings";
@ -40,6 +40,7 @@ import { Action } from "../../../../../src/dispatcher/actions";
 import { mkVoiceBroadcastInfoStateEvent } from "../../../voice-broadcast/utils/test-utils";
 import { VoiceBroadcastInfoState } from "../../../../../src/voice-broadcast";
 import { createMessageEventContent } from "../../../../test-utils/events";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 jest.mock("../../../../../src/utils/strings", () => ({
    copyPlaintext: jest.fn(),
@ -546,8 +547,8 @@ function createMenu(
    client.getRoom = jest.fn().mockReturnValue(room);

    return render(
-        <RoomContext.Provider value={context as IRoomState}>
+        <ScopedRoomContextProvider {...(context as IRoomState)}>
            <MessageContextMenu mxEvent={mxEvent} onFinished={jest.fn()} {...props} />
-        </RoomContext.Provider>,
+        </ScopedRoomContextProvider>,
    );
 }
--- a/test/unit-tests/components/views/messages/MFileBody-test.tsx
+++ b/test/unit-tests/components/views/messages/MFileBody-test.tsx
@ -20,7 +20,8 @@ import {
 import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import MFileBody from "../../../../../src/components/views/messages/MFileBody.tsx";
-import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext.ts";
+import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext.ts";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 jest.mock("matrix-encrypt-attachment", () => ({
    decryptAttachment: jest.fn(),
@ -72,14 +73,14 @@ describe("<MFileBody/>", () => {

    it("should show a download button in file rendering type", async () => {
        const { container, getByRole } = render(
-            <RoomContext.Provider value={{ timelineRenderingType: TimelineRenderingType.File } as any}>
+            <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.File } as any)}>
                <MFileBody
                    {...props}
                    mxEvent={mediaEvent}
                    mediaEventHelper={new MediaEventHelper(mediaEvent)}
                    showGenericPlaceholder={false}
                />
-            </RoomContext.Provider>,
+            </ScopedRoomContextProvider>,
        );

        expect(getByRole("link", { name: "Download" })).toBeInTheDocument();
--- a/test/unit-tests/components/views/messages/MessageActionBar-test.tsx
+++ b/test/unit-tests/components/views/messages/MessageActionBar-test.tsx
@ -35,6 +35,7 @@ import dispatcher from "../../../../../src/dispatcher/dispatcher";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { Action } from "../../../../../src/dispatcher/actions";
 import PinningUtils from "../../../../../src/utils/PinningUtils";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 jest.mock("../../../../../src/dispatcher/dispatcher");

@ -117,9 +118,9 @@ describe("<MessageActionBar />", () => {
    } as unknown as IRoomState;
    const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) =>
        render(
-            <RoomContext.Provider value={{ ...defaultRoomContext, ...roomContext }}>
+            <ScopedRoomContextProvider {...defaultRoomContext} {...roomContext}>
                <MessageActionBar {...defaultProps} {...props} />
-            </RoomContext.Provider>,
+            </ScopedRoomContextProvider>,
        );

    beforeEach(() => {
--- a/test/unit-tests/components/views/messages/RoomPredecessorTile-test.tsx
+++ b/test/unit-tests/components/views/messages/RoomPredecessorTile-test.tsx
@ -20,9 +20,9 @@ import {
 } from "../../../../../src/components/views/messages/RoomPredecessorTile";
 import { stubClient, upsertRoomStateEvents } from "../../../../test-utils/test-utils";
 import { Action } from "../../../../../src/dispatcher/actions";
-import RoomContext from "../../../../../src/contexts/RoomContext";
 import { filterConsole, getRoomContext } from "../../../../test-utils";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 jest.mock("../../../../../src/dispatcher/dispatcher");

@ -99,9 +99,9 @@ describe("<RoomPredecessorTile />", () => {
        expect(createEvent).toBeTruthy();

        return render(
-            <RoomContext.Provider value={getRoomContext(room, {})}>
+            <ScopedRoomContextProvider {...getRoomContext(room, {})}>
                <RoomPredecessorTile mxEvent={createEvent} />
-            </RoomContext.Provider>,
+            </ScopedRoomContextProvider>,
        );
    }

--- a/test/unit-tests/components/views/right_panel/RoomSummaryCard-test.tsx
+++ b/test/unit-tests/components/views/right_panel/RoomSummaryCard-test.tsx
@ -30,7 +30,8 @@ import { _t } from "../../../../../src/languageHandler";
 import { tagRoom } from "../../../../../src/utils/room/tagRoom";
 import { DefaultTagID } from "../../../../../src/stores/room-list/models";
 import { Action } from "../../../../../src/dispatcher/actions";
-import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 jest.mock("../../../../../src/utils/room/tagRoom");

@ -172,14 +173,14 @@ describe("<RoomSummaryCard />", () => {
            const onSearchChange = jest.fn();
            const { rerender } = render(
                <MatrixClientContext.Provider value={mockClient}>
-                    <RoomContext.Provider value={{ timelineRenderingType: TimelineRenderingType.Search } as any}>
+                    <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Search } as any)}>
                        <RoomSummaryCard
                            room={room}
                            permalinkCreator={new RoomPermalinkCreator(room)}
                            onSearchChange={onSearchChange}
                            focusRoomSearch={true}
                        />
-                    </RoomContext.Provider>
+                    </ScopedRoomContextProvider>
                </MatrixClientContext.Provider>,
            );

@ -188,13 +189,13 @@ describe("<RoomSummaryCard />", () => {

            rerender(
                <MatrixClientContext.Provider value={mockClient}>
-                    <RoomContext.Provider value={{ timelineRenderingType: TimelineRenderingType.Room } as any}>
+                    <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Room } as any)}>
                        <RoomSummaryCard
                            room={room}
                            permalinkCreator={new RoomPermalinkCreator(room)}
                            onSearchChange={onSearchChange}
                        />
-                    </RoomContext.Provider>
+                    </ScopedRoomContextProvider>
                </MatrixClientContext.Provider>,
            );
            expect(screen.getByPlaceholderText("Search messages…")).toHaveValue("");
--- a/test/unit-tests/components/views/rooms/EditMessageComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/EditMessageComposer-test.tsx
@ -27,12 +27,12 @@ import {
 import DocumentOffset from "../../../../../src/editor/offset";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import EditorStateTransfer from "../../../../../src/utils/EditorStateTransfer";
-import RoomContext from "../../../../../src/contexts/RoomContext";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import Autocompleter, { IProviderCompletions } from "../../../../../src/autocomplete/Autocompleter";
 import NotifProvider from "../../../../../src/autocomplete/NotifProvider";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("<EditMessageComposer/>", () => {
    const userId = "@alice:server.org";
@ -79,7 +79,7 @@ describe("<EditMessageComposer/>", () => {
        render(<EditMessageComposerWithMatrixClient editState={editState} />, {
            wrapper: ({ children }) => (
                <MatrixClientContext.Provider value={mockClient}>
-                    <RoomContext.Provider value={roomContext}>{children}</RoomContext.Provider>
+                    <ScopedRoomContextProvider {...roomContext}>{children}</ScopedRoomContextProvider>
                </MatrixClientContext.Provider>
            ),
        });
--- a/test/unit-tests/components/views/rooms/EventTile-test.tsx
+++ b/test/unit-tests/components/views/rooms/EventTile-test.tsx
@ -30,7 +30,7 @@ import { mkEncryptedMatrixEvent } from "matrix-js-sdk/src/testing";

 import EventTile, { EventTileProps } from "../../../../../src/components/views/rooms/EventTile";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import { filterConsole, flushPromises, getRoomContext, mkEvent, mkMessage, stubClient } from "../../../../test-utils";
 import { mkThread } from "../../../../test-utils/threads";
@ -40,6 +40,7 @@ import { Action } from "../../../../../src/dispatcher/actions";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import PinningUtils from "../../../../../src/utils/PinningUtils";
 import { Layout } from "../../../../../src/settings/enums/Layout";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("EventTile", () => {
    const ROOM_ID = "!roomId:example.org";
@ -56,13 +57,13 @@ describe("EventTile", () => {
    }) {
        return (
            <MatrixClientContext.Provider value={client}>
-                <RoomContext.Provider value={props.roomContext}>
+                <ScopedRoomContextProvider {...props.roomContext}>
                    <EventTile
                        mxEvent={mxEvent}
                        replacingEventId={mxEvent.replacingEventId()}
                        {...(props.eventTilePropertyOverrides ?? {})}
                    />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>
        );
    }
--- a/test/unit-tests/components/views/rooms/MessageComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/MessageComposer-test.tsx
@ -24,7 +24,6 @@ import {
 import MessageComposer from "../../../../../src/components/views/rooms/MessageComposer";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import RoomContext from "../../../../../src/contexts/RoomContext";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
@ -40,6 +39,7 @@ import { Action } from "../../../../../src/dispatcher/actions";
 import { VoiceBroadcastInfoState, VoiceBroadcastRecording } from "../../../../../src/voice-broadcast";
 import { mkVoiceBroadcastInfoStateEvent } from "../../../voice-broadcast/utils/test-utils";
 import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 const openStickerPicker = async (): Promise<void> => {
    await userEvent.click(screen.getByLabelText("More options"));
@ -512,9 +512,9 @@ function wrapAndRender(

    const getRawComponent = (props = {}, context = roomContext, client = mockClient) => (
        <MatrixClientContext.Provider value={client}>
-            <RoomContext.Provider value={context}>
+            <ScopedRoomContextProvider {...context}>
                <MessageComposer {...defaultProps} {...props} />
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        </MatrixClientContext.Provider>
    );
    return {
--- a/test/unit-tests/components/views/rooms/MessageComposerButtons-test.tsx
+++ b/test/unit-tests/components/views/rooms/MessageComposerButtons-test.tsx
@ -10,11 +10,11 @@ import React from "react";
 import { render, screen, waitFor } from "jest-matrix-react";

 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../../src/contexts/RoomContext";
 import { createTestClient, getRoomContext, mkStubRoom } from "../../../../test-utils";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import MessageComposerButtons from "../../../../../src/components/views/rooms/MessageComposerButtons";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("MessageComposerButtons", () => {
    // @ts-ignore - we're deliberately not implementing the whole interface here, but
@ -54,7 +54,7 @@ describe("MessageComposerButtons", () => {

        return render(
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={defaultRoomContext}>{component}</RoomContext.Provider>
+                <ScopedRoomContextProvider {...defaultRoomContext}>{component}</ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );
    }
--- a/test/unit-tests/components/views/rooms/NewRoomIntro-test.tsx
+++ b/test/unit-tests/components/views/rooms/NewRoomIntro-test.tsx
@ -13,19 +13,19 @@ import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";

 import { LocalRoom } from "../../../../../src/models/LocalRoom";
 import { filterConsole, mkRoomMemberJoinEvent, mkThirdPartyInviteEvent, stubClient } from "../../../../test-utils";
-import RoomContext from "../../../../../src/contexts/RoomContext";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import NewRoomIntro from "../../../../../src/components/views/rooms/NewRoomIntro";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import { DirectoryMember } from "../../../../../src/utils/direct-messages";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 const renderNewRoomIntro = (client: MatrixClient, room: Room | LocalRoom) => {
    render(
        <MatrixClientContext.Provider value={client}>
-            <RoomContext.Provider value={{ room, roomId: room.roomId } as unknown as IRoomState}>
+            <ScopedRoomContextProvider {...({ room, roomId: room.roomId } as unknown as IRoomState)}>
                <NewRoomIntro />
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        </MatrixClientContext.Provider>,
    );
 };
--- a/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
@ -18,7 +18,7 @@ import SendMessageComposer, {
    isQuickReaction,
 } from "../../../../../src/components/views/rooms/SendMessageComposer";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import EditorModel from "../../../../../src/editor/model";
 import { createPartCreator } from "../../../editor/mock";
 import { createTestClient, mkEvent, mkStubRoom, stubClient } from "../../../../test-utils";
@ -30,6 +30,7 @@ import { IRoomState, MainSplitContentType } from "../../../../../src/components/
 import { mockPlatformPeg } from "../../../../test-utils/platform";
 import { doMaybeLocalRoomAction } from "../../../../../src/utils/local-room";
 import { addTextToComposer } from "../../../../test-utils/composer";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 jest.mock("../../../../../src/utils/local-room", () => ({
    doMaybeLocalRoomAction: jest.fn(),
@ -365,9 +366,9 @@ describe("<SendMessageComposer/>", () => {
        };
        const getRawComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => (
            <MatrixClientContext.Provider value={client}>
-                <RoomContext.Provider value={roomContext}>
+                <ScopedRoomContextProvider {...roomContext}>
                    <SendMessageComposer {...defaultProps} {...props} />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>
        );
        const getComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => {
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
@ -11,7 +11,6 @@ import React from "react";
 import { fireEvent, render, screen, waitFor } from "jest-matrix-react";

 import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../../../src/contexts/RoomContext";
 import defaultDispatcher from "../../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../../src/dispatcher/actions";
 import { flushPromises, mkEvent } from "../../../../../test-utils";
@ -23,6 +22,7 @@ import { ComposerInsertPayload, ComposerType } from "../../../../../../src/dispa
 import { ActionPayload } from "../../../../../../src/dispatcher/payloads";
 import * as EmojiButton from "../../../../../../src/components/views/rooms/EmojiButton";
 import { createMocks } from "./utils";
+import { ScopedRoomContextProvider } from "../../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("EditWysiwygComposer", () => {
    afterEach(() => {
@ -39,9 +39,9 @@ describe("EditWysiwygComposer", () => {
    ) => {
        return render(
            <MatrixClientContext.Provider value={client}>
-                <RoomContext.Provider value={roomContext}>
+                <ScopedRoomContextProvider {...roomContext}>
                    <EditWysiwygComposer disabled={disabled} editorStateTransfer={_editorStateTransfer} />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );
    };
@ -64,9 +64,9 @@ describe("EditWysiwygComposer", () => {

        rerender(
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={{ ...defaultRoomContext, room: undefined }}>
+                <ScopedRoomContextProvider {...defaultRoomContext} room={undefined}>
                    <EditWysiwygComposer disabled={false} editorStateTransfer={editorStateTransfer} />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );

@ -275,10 +275,10 @@ describe("EditWysiwygComposer", () => {
        );
        render(
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={defaultRoomContext}>
+                <ScopedRoomContextProvider {...defaultRoomContext}>
                    <EditWysiwygComposer editorStateTransfer={editorStateTransfer} />
                    <Emoji menuPosition={{ chevronFace: ChevronFace.Top }} />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );
        // Same behavior as in RoomView.tsx
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
@ -11,7 +11,6 @@ import React from "react";
 import { act, fireEvent, render, screen, waitFor } from "jest-matrix-react";

 import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../../../src/contexts/RoomContext";
 import defaultDispatcher from "../../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../../src/dispatcher/actions";
 import { flushPromises } from "../../../../../test-utils";
@ -20,6 +19,7 @@ import { aboveLeftOf } from "../../../../../../src/components/structures/Context
 import { ComposerInsertPayload, ComposerType } from "../../../../../../src/dispatcher/payloads/ComposerInsertPayload";
 import { setSelection } from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection";
 import { createMocks } from "./utils";
+import { ScopedRoomContextProvider } from "../../../../../../src/contexts/ScopedRoomContext.tsx";

 jest.mock("../../../../../../src/components/views/rooms/EmojiButton", () => ({
    EmojiButton: ({ addEmoji }: { addEmoji: (emoji: string) => void }) => {
@ -66,7 +66,7 @@ describe("SendWysiwygComposer", () => {
    ) => {
        return render(
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={defaultRoomContext}>
+                <ScopedRoomContextProvider {...defaultRoomContext}>
                    <SendWysiwygComposer
                        onChange={onChange}
                        onSend={onSend}
@ -75,7 +75,7 @@ describe("SendWysiwygComposer", () => {
                        menuPosition={aboveLeftOf({ top: 0, bottom: 0, right: 0 })}
                        placeholder={placeholder}
                    />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );
    };
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
@ -14,7 +14,7 @@ import { PlainTextComposer } from "../../../../../../../src/components/views/roo
 import * as mockUseSettingsHook from "../../../../../../../src/hooks/useSettings";
 import * as mockKeyboard from "../../../../../../../src/Keyboard";
 import { createMocks } from "../utils";
-import RoomContext from "../../../../../../../src/contexts/RoomContext";
+import { ScopedRoomContextProvider } from "../../../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("PlainTextComposer", () => {
    const customRender = (
@ -275,9 +275,9 @@ describe("PlainTextComposer", () => {
        const { defaultRoomContext } = createMocks();

        render(
-            <RoomContext.Provider value={defaultRoomContext}>
+            <ScopedRoomContextProvider {...defaultRoomContext}>
                <PlainTextComposer onChange={jest.fn()} onSend={jest.fn()} disabled={false} initialContent="" />
-            </RoomContext.Provider>,
+            </ScopedRoomContextProvider>,
        );

        expect(screen.getByTestId("autocomplete-wrapper")).toBeInTheDocument();
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete-test.tsx
@ -11,12 +11,12 @@ import React, { createRef } from "react";
 import { render, screen, waitFor } from "jest-matrix-react";

 import MatrixClientContext from "../../../../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../../../../src/contexts/RoomContext";
 import { WysiwygAutocomplete } from "../../../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete";
 import { getRoomContext, mkStubRoom, stubClient } from "../../../../../../test-utils";
 import Autocomplete from "../../../../../../../src/components/views/rooms/Autocomplete";
 import Autocompleter, { ICompletion } from "../../../../../../../src/autocomplete/Autocompleter";
 import AutocompleteProvider from "../../../../../../../src/autocomplete/AutocompleteProvider";
+import { ScopedRoomContextProvider } from "../../../../../../../src/contexts/ScopedRoomContext.tsx";

 const mockCompletion: ICompletion[] = [
    {
@ -71,7 +71,7 @@ describe("WysiwygAutocomplete", () => {

        return render(
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={mockRoomContext}>
+                <ScopedRoomContextProvider {...mockRoomContext}>
                    <WysiwygAutocomplete
                        ref={autocompleteRef}
                        suggestion={null}
@ -80,7 +80,7 @@ describe("WysiwygAutocomplete", () => {
                        handleAtRoomMention={mockHandleAtRoomMention}
                        {...props}
                    />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );
    };
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
@ -18,7 +18,6 @@ import defaultDispatcher from "../../../../../../../src/dispatcher/dispatcher";
 import * as EventUtils from "../../../../../../../src/utils/EventUtils";
 import { Action } from "../../../../../../../src/dispatcher/actions";
 import MatrixClientContext from "../../../../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../../../../src/contexts/RoomContext";
 import {
    ComposerContext,
    getDefaultContextValue,
@ -32,20 +31,21 @@ import Autocompleter, { ICompletion } from "../../../../../../../src/autocomplet
 import AutocompleteProvider from "../../../../../../../src/autocomplete/AutocompleteProvider";
 import * as Permalinks from "../../../../../../../src/utils/permalinks/Permalinks";
 import { PermalinkParts } from "../../../../../../../src/utils/permalinks/PermalinkConstructor";
+import { ScopedRoomContextProvider } from "../../../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("WysiwygComposer", () => {
    const customRender = (onChange = jest.fn(), onSend = jest.fn(), disabled = false, initialContent?: string) => {
        const { mockClient, defaultRoomContext } = createMocks();
        return render(
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={defaultRoomContext}>
+                <ScopedRoomContextProvider {...defaultRoomContext}>
                    <WysiwygComposer
                        onChange={onChange}
                        onSend={onSend}
                        disabled={disabled}
                        initialContent={initialContent}
                    />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );
    };
@ -523,7 +523,7 @@ describe("WysiwygComposer", () => {
        ) => {
            return render(
                <MatrixClientContext.Provider value={client}>
-                    <RoomContext.Provider value={roomContext}>
+                    <ScopedRoomContextProvider {...roomContext}>
                        <ComposerContext.Provider
                            value={getDefaultContextValue({ editorStateTransfer: _editorStateTransfer })}
                        >
@ -537,7 +537,7 @@ describe("WysiwygComposer", () => {
                                }
                            />
                        </ComposerContext.Provider>
-                    </RoomContext.Provider>
+                    </ScopedRoomContextProvider>
                </MatrixClientContext.Provider>,
            );
        };