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/views/rooms/HistoryTile.tsx

@@ -6,15 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useContext } from "react";
+import React from "react";
 import { EventTimeline } from "matrix-js-sdk/src/matrix";
 
 import EventTileBubble from "../messages/EventTileBubble";
-import RoomContext from "../../../contexts/RoomContext";
 import { _t } from "../../../languageHandler";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
 
 const HistoryTile: React.FC = () => {
-    const { room } = useContext(RoomContext);
+    const { room } = useScopedRoomContext("room");
 
     const oldState = room?.getLiveTimeline().getState(EventTimeline.BACKWARDS);
     const historyState = oldState?.getStateEvents("m.room.history_visibility")[0]?.getContent().history_visibility;

src/components/views/rooms/MessageComposerButtons.tsx

@@ -21,7 +21,6 @@ import PollCreateDialog from "../elements/PollCreateDialog";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import ContentMessages from "../../../ContentMessages";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import RoomContext from "../../../contexts/RoomContext";
 import { useDispatcher } from "../../../hooks/useDispatcher";
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
 import IconizedContextMenu, { IconizedContextMenuOptionList } from "../context_menus/IconizedContextMenu";
@@ -29,6 +28,7 @@ import { EmojiButton } from "./EmojiButton";
 import { filterBoolean } from "../../../utils/arrays";
 import { useSettingValue } from "../../../hooks/useSettings";
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
 
 interface IProps {
     addEmoji: (emoji: string) => boolean;
@@ -54,7 +54,7 @@ export const OverflowMenuContext = createContext<OverflowMenuCloser | null>(null
 
 const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
     const matrixClient = useContext(MatrixClientContext);
-    const { room, narrow } = useContext(RoomContext);
+    const { room, narrow } = useScopedRoomContext("room", "narrow");
 
     const isWysiwygLabEnabled = useSettingValue<boolean>("feature_wysiwyg_composer");
 
@@ -168,7 +168,7 @@ interface IUploadButtonProps {
 // We put the file input outside the UploadButton component so that it doesn't get killed when the context menu closes.
 const UploadButtonContextProvider: React.FC<IUploadButtonProps> = ({ roomId, relation, children }) => {
     const cli = useContext(MatrixClientContext);
-    const roomContext = useContext(RoomContext);
+    const roomContext = useScopedRoomContext("timelineRenderingType");
     const uploadInput = useRef<HTMLInputElement>(null);
 
     const onUploadClick = (): void => {

src/components/views/rooms/NewRoomIntro.tsx

@@ -11,7 +11,6 @@ import { EventType, Room, User, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import RoomContext from "../../../contexts/RoomContext";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { _t, _td, TranslationKey } from "../../../languageHandler";
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
@@ -30,6 +29,7 @@ import { UIComponent } from "../../../settings/UIFeature";
 import { privateShouldBeEncrypted } from "../../../utils/rooms";
 import { LocalRoom } from "../../../models/LocalRoom";
 import { shouldEncryptRoomWithSingle3rdPartyInvite } from "../../../utils/room/shouldEncryptRoomWithSingle3rdPartyInvite";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
 
 function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room): boolean {
     const isEncrypted: boolean = matrixClient.isRoomEncrypted(room.roomId);
@@ -51,7 +51,7 @@ const determineIntroMessage = (room: Room, encryptedSingle3rdPartyInvite: boolea
 
 const NewRoomIntro: React.FC = () => {
     const cli = useContext(MatrixClientContext);
-    const { room, roomId } = useContext(RoomContext);
+    const { room, roomId } = useScopedRoomContext("room", "roomId");
 
     if (!room || !roomId) {
         throw new Error("Unable to create a NewRoomIntro without room and roomId");

src/components/views/rooms/RoomHeader.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useCallback, useContext, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { Body as BodyText, Button, IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web";
 import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
 import VoiceCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/voice-call";
@@ -48,10 +48,10 @@ import { CallGuestLinkButton } from "./RoomHeader/CallGuestLinkButton";
 import { ButtonEvent } from "../elements/AccessibleButton";
 import WithPresenceIndicator, { useDmMember } from "../avatars/WithPresenceIndicator";
 import { IOOBData } from "../../../stores/ThreepidInviteStore";
-import RoomContext from "../../../contexts/RoomContext";
 import { MainSplitContentType } from "../../structures/RoomView";
 import defaultDispatcher from "../../../dispatcher/dispatcher.ts";
 import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog.tsx";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
 
 export default function RoomHeader({
     room,
@@ -229,7 +229,7 @@ export default function RoomHeader({
         voiceCallButton = undefined;
     }
 
-    const roomContext = useContext(RoomContext);
+    const roomContext = useScopedRoomContext("mainSplitContentType");
     const isVideoRoom = calcIsVideoRoom(room);
     const showChatButton =
         isVideoRoom ||

src/components/views/rooms/ThreadSummary.tsx

@@ -16,7 +16,6 @@ import { CardContext } from "../right_panel/context";
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
-import RoomContext from "../../../contexts/RoomContext";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { Action } from "../../../dispatcher/actions";
 import { ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadPayload";
@@ -24,6 +23,7 @@ import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { useUnreadNotifications } from "../../../hooks/useUnreadNotifications";
 import { notificationLevelToIndicator } from "../../../utils/notifications";
 import { EventPreviewTile, useEventPreview } from "./EventPreview.tsx";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -31,7 +31,7 @@ interface IProps {
 }
 
 const ThreadSummary: React.FC<IProps> = ({ mxEvent, thread, ...props }) => {
-    const roomContext = useContext(RoomContext);
+    const roomContext = useScopedRoomContext("narrow");
     const cardContext = useContext(CardContext);
     const count = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.length);
     const { level } = useUnreadNotifications(thread.room, thread.id);

src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx

@@ -13,14 +13,14 @@ import { EmojiButton } from "../../EmojiButton";
 import dis from "../../../../../dispatcher/dispatcher";
 import { ComposerInsertPayload } from "../../../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from "../../../../../dispatcher/actions";
-import { useRoomContext } from "../../../../../contexts/RoomContext";
+import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.tsx";
 
 interface EmojiProps {
     menuPosition: MenuProps;
 }
 
 export function Emoji({ menuPosition }: EmojiProps): JSX.Element {
-    const roomContext = useRoomContext();
+    const roomContext = useScopedRoomContext("timelineRenderingType");
 
     return (
         <EmojiButton

src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx

@@ -10,11 +10,11 @@ import React, { ForwardedRef, forwardRef, FunctionComponent } from "react";
 import { FormattingFunctions, MappedSuggestion } from "@vector-im/matrix-wysiwyg";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { useRoomContext } from "../../../../../contexts/RoomContext";
 import Autocomplete from "../../Autocomplete";
 import { ICompletion } from "../../../../../autocomplete/Autocompleter";
 import { useMatrixClientContext } from "../../../../../contexts/MatrixClientContext";
 import { getMentionDisplayText, getMentionAttributes, buildQuery } from "../utils/autocomplete";
+import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.tsx";
 
 interface WysiwygAutocompleteProps {
     /**
@@ -53,7 +53,7 @@ const WysiwygAutocomplete = forwardRef(
         { suggestion, handleMention, handleCommand, handleAtRoomMention }: WysiwygAutocompleteProps,
         ref: ForwardedRef<Autocomplete>,
     ): JSX.Element | null => {
-        const { room } = useRoomContext();
+        const { room } = useScopedRoomContext("room");
         const client = useMatrixClientContext();
 
         function handleConfirm(completion: ICompletion): void {

src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx

@@ -19,12 +19,12 @@ import { Editor } from "./Editor";
 import { useInputEventProcessor } from "../hooks/useInputEventProcessor";
 import { useSetCursorPosition } from "../hooks/useSetCursorPosition";
 import { useIsFocused } from "../hooks/useIsFocused";
-import { useRoomContext } from "../../../../../contexts/RoomContext";
 import defaultDispatcher from "../../../../../dispatcher/dispatcher";
 import { Action } from "../../../../../dispatcher/actions";
 import { parsePermalink } from "../../../../../utils/permalinks/Permalinks";
 import { isNotNull } from "../../../../../Typeguards";
 import { useSettingValue } from "../../../../../hooks/useSettings";
+import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.tsx";
 
 interface WysiwygComposerProps {
     disabled?: boolean;
@@ -56,7 +56,7 @@ export const WysiwygComposer = memo(function WysiwygComposer({
     children,
     eventRelation,
 }: WysiwygComposerProps) {
-    const { room } = useRoomContext();
+    const { room } = useScopedRoomContext("room");
     const autocompleteRef = useRef<Autocomplete | null>(null);
 
     const inputEventProcessor = useInputEventProcessor(onSend, autocompleteRef, initialContent, eventRelation);

src/components/views/rooms/wysiwyg_composer/hooks/useEditing.ts

@@ -10,10 +10,10 @@ import { ISendEventResponse } from "matrix-js-sdk/src/matrix";
 import { useCallback, useState } from "react";
 
 import { useMatrixClientContext } from "../../../../../contexts/MatrixClientContext";
-import { useRoomContext } from "../../../../../contexts/RoomContext";
 import EditorStateTransfer from "../../../../../utils/EditorStateTransfer";
 import { endEditing } from "../utils/editing";
 import { editMessage } from "../utils/message";
+import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.tsx";
 
 export function useEditing(
     editorStateTransfer: EditorStateTransfer,
@@ -24,7 +24,7 @@ export function useEditing(
     editMessage(): Promise<ISendEventResponse | undefined>;
     endEditing(): void;
 } {
-    const roomContext = useRoomContext();
+    const roomContext = useScopedRoomContext("timelineRenderingType");
     const mxClient = useMatrixClientContext();
 
     const [isSaveDisabled, setIsSaveDisabled] = useState(true);

src/components/views/rooms/wysiwyg_composer/hooks/useInitialContent.ts

@@ -10,11 +10,11 @@ import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { useMemo } from "react";
 
 import { useMatrixClientContext } from "../../../../../contexts/MatrixClientContext";
-import { useRoomContext } from "../../../../../contexts/RoomContext";
 import { parseEvent } from "../../../../../editor/deserialize";
 import { CommandPartCreator, Part } from "../../../../../editor/parts";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import EditorStateTransfer from "../../../../../utils/EditorStateTransfer";
+import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.tsx";
 
 function getFormattedContent(editorStateTransfer: EditorStateTransfer): string {
     return (
@@ -60,12 +60,12 @@ export function parseEditorStateTransfer(
 }
 
 export function useInitialContent(editorStateTransfer: EditorStateTransfer): string | undefined {
-    const roomContext = useRoomContext();
+    const { room } = useScopedRoomContext("room");
     const mxClient = useMatrixClientContext();
 
     return useMemo<string | undefined>(() => {
-        if (editorStateTransfer && roomContext.room && mxClient) {
-            return parseEditorStateTransfer(editorStateTransfer, roomContext.room, mxClient);
+        if (editorStateTransfer && room && mxClient) {
+            return parseEditorStateTransfer(editorStateTransfer, room, mxClient);
         }
-    }, [editorStateTransfer, roomContext, mxClient]);
+    }, [editorStateTransfer, room, mxClient]);
 }

src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts

@@ -16,7 +16,6 @@ import { KeyBindingAction } from "../../../../../accessibility/KeyboardShortcuts
 import { findEditableEvent } from "../../../../../utils/EventUtils";
 import dis from "../../../../../dispatcher/dispatcher";
 import { Action } from "../../../../../dispatcher/actions";
-import { useRoomContext } from "../../../../../contexts/RoomContext";
 import { IRoomState } from "../../../../structures/RoomView";
 import { ComposerContextState, useComposerContext } from "../ComposerContext";
 import EditorStateTransfer from "../../../../../utils/EditorStateTransfer";
@@ -26,6 +25,7 @@ import { getEventsFromEditorStateTransfer, getEventsFromRoom } from "../utils/ev
 import { endEditing } from "../utils/editing";
 import Autocomplete from "../../Autocomplete";
 import { handleClipboardEvent, handleEventWithAutocomplete, isEventToHandleAsClipboardEvent } from "./utils";
+import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.tsx";
 
 export function useInputEventProcessor(
     onSend: () => void,
@@ -33,7 +33,7 @@ export function useInputEventProcessor(
     initialContent?: string,
     eventRelation?: IEventRelation,
 ): (event: WysiwygEvent, composer: Wysiwyg, editor: HTMLElement) => WysiwygEvent | null {
-    const roomContext = useRoomContext();
+    const roomContext = useScopedRoomContext("liveTimeline", "room", "replyToEvent", "timelineRenderingType");
     const composerContext = useComposerContext();
     const mxClient = useMatrixClientContext();
     const isCtrlEnterToSend = useSettingValue<boolean>("MessageComposerInput.ctrlEnterToSend");
@@ -94,7 +94,7 @@ function handleKeyboardEvent(
     initialContent: string | undefined,
     composer: Wysiwyg,
     editor: HTMLElement,
-    roomContext: IRoomState,
+    roomContext: Pick<IRoomState, "liveTimeline" | "timelineRenderingType" | "room">,
     composerContext: ComposerContextState,
     mxClient: MatrixClient | undefined,
     autocompleteRef: React.RefObject<Autocomplete>,
@@ -175,7 +175,7 @@ function dispatchEditEvent(
     isForward: boolean,
     editorStateTransfer: EditorStateTransfer | undefined,
     composerContext: ComposerContextState,
-    roomContext: IRoomState,
+    roomContext: Pick<IRoomState, "liveTimeline" | "timelineRenderingType" | "room">,
     mxClient: MatrixClient,
 ): boolean {
     const foundEvents = editorStateTransfer

src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts

@@ -16,8 +16,8 @@ import Autocomplete from "../../Autocomplete";
 import { handleClipboardEvent, handleEventWithAutocomplete, isEventToHandleAsClipboardEvent } from "./utils";
 import { useSuggestion } from "./useSuggestion";
 import { isNotNull, isNotUndefined } from "../../../../../Typeguards";
-import { useRoomContext } from "../../../../../contexts/RoomContext";
 import { useMatrixClientContext } from "../../../../../contexts/MatrixClientContext";
+import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.tsx";
 
 function isDivElement(target: EventTarget): target is HTMLDivElement {
     return target instanceof HTMLDivElement;
@@ -63,7 +63,7 @@ export function usePlainTextListeners(
     onSelect: (event: SyntheticEvent<HTMLDivElement>) => void;
     suggestion: MappedSuggestion | null;
 } {
-    const roomContext = useRoomContext();
+    const roomContext = useScopedRoomContext("room", "timelineRenderingType", "replyToEvent");
     const mxClient = useMatrixClientContext();
 
     const ref = useRef<HTMLDivElement | null>(null);

src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts

@@ -11,20 +11,21 @@ import { RefObject, useCallback, useRef } from "react";
 import defaultDispatcher from "../../../../../dispatcher/dispatcher";
 import { Action } from "../../../../../dispatcher/actions";
 import { ActionPayload } from "../../../../../dispatcher/payloads";
-import { TimelineRenderingType, useRoomContext } from "../../../../../contexts/RoomContext";
+import { TimelineRenderingType } from "../../../../../contexts/RoomContext";
 import { useDispatcher } from "../../../../../hooks/useDispatcher";
 import { focusComposer } from "./utils";
 import { ComposerType } from "../../../../../dispatcher/payloads/ComposerInsertPayload";
 import { ComposerFunctions } from "../types";
 import { setSelection } from "../utils/selection";
 import { useComposerContext } from "../ComposerContext";
+import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.tsx";
 
 export function useWysiwygEditActionHandler(
     disabled: boolean,
     composerElement: RefObject<HTMLElement>,
     composerFunctions: ComposerFunctions,
 ): void {
-    const roomContext = useRoomContext();
+    const roomContext = useScopedRoomContext("timelineRenderingType");
     const composerContext = useComposerContext();
     const timeoutId = useRef<number | null>(null);
 

src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts

@@ -11,20 +11,21 @@ import { MutableRefObject, useCallback, useRef } from "react";
 import defaultDispatcher from "../../../../../dispatcher/dispatcher";
 import { Action } from "../../../../../dispatcher/actions";
 import { ActionPayload } from "../../../../../dispatcher/payloads";
-import { TimelineRenderingType, useRoomContext } from "../../../../../contexts/RoomContext";
+import { TimelineRenderingType } from "../../../../../contexts/RoomContext";
 import { useDispatcher } from "../../../../../hooks/useDispatcher";
 import { focusComposer } from "./utils";
 import { ComposerFunctions } from "../types";
 import { ComposerType } from "../../../../../dispatcher/payloads/ComposerInsertPayload";
 import { useComposerContext } from "../ComposerContext";
 import { setSelection } from "../utils/selection";
+import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.tsx";
 
 export function useWysiwygSendActionHandler(
     disabled: boolean,
     composerElement: MutableRefObject<HTMLElement>,
     composerFunctions: ComposerFunctions,
 ): void {
-    const roomContext = useRoomContext();
+    const roomContext = useScopedRoomContext("timelineRenderingType");
     const composerContext = useComposerContext();
     const timeoutId = useRef<number | null>(null);
 

src/components/views/rooms/wysiwyg_composer/hooks/utils.ts

@@ -22,7 +22,7 @@ import { isNotNull } from "../../../../../Typeguards";
 export function focusComposer(
     composerElement: MutableRefObject<HTMLElement | null>,
     renderingType: TimelineRenderingType,
-    roomContext: IRoomState,
+    roomContext: Pick<IRoomState, "timelineRenderingType">,
     timeoutId: MutableRefObject<number | null>,
 ): void {
     if (renderingType === roomContext.timelineRenderingType) {
@@ -123,7 +123,7 @@ export function handleEventWithAutocomplete(
 export function handleClipboardEvent(
     event: ClipboardEvent | InputEvent,
     data: DataTransfer | null,
-    roomContext: IRoomState,
+    roomContext: Pick<IRoomState, "room" | "timelineRenderingType" | "replyToEvent">,
     mxClient: MatrixClient,
     eventRelation?: IEventRelation,
 ): boolean {

src/components/views/rooms/wysiwyg_composer/utils/editing.ts

@@ -13,7 +13,7 @@ import dis from "../../../../../dispatcher/dispatcher";
 import { Action } from "../../../../../dispatcher/actions";
 import EditorStateTransfer from "../../../../../utils/EditorStateTransfer";
 
-export function endEditing(roomContext: IRoomState): void {
+export function endEditing(roomContext: Pick<IRoomState, "timelineRenderingType">): void {
     // todo local storage
     // localStorage.removeItem(this.editorRoomKey);
     // localStorage.removeItem(this.editorStateKey);

src/components/views/rooms/wysiwyg_composer/utils/event.ts

@@ -15,7 +15,7 @@ import { ComposerContextState } from "../ComposerContext";
 // From EditMessageComposer private get events(): MatrixEvent[]
 export function getEventsFromEditorStateTransfer(
     editorStateTransfer: EditorStateTransfer,
-    roomContext: IRoomState,
+    roomContext: Pick<IRoomState, "liveTimeline">,
     mxClient: MatrixClient,
 ): MatrixEvent[] | undefined {
     const liveTimelineEvents = roomContext.liveTimeline?.getEvents();
@@ -41,7 +41,7 @@ export function getEventsFromEditorStateTransfer(
 // From SendMessageComposer private onKeyDown = (event: KeyboardEvent): void
 export function getEventsFromRoom(
     composerContext: ComposerContextState,
-    roomContext: IRoomState,
+    roomContext: Pick<IRoomState, "liveTimeline" | "room">,
 ): MatrixEvent[] | undefined {
     const isReplyingToThread = composerContext.eventRelation?.key === THREAD_RELATION_TYPE.name;
     return roomContext.liveTimeline

src/components/views/rooms/wysiwyg_composer/utils/message.ts

@@ -39,7 +39,7 @@ export interface SendMessageParams {
     mxClient: MatrixClient;
     relation?: IEventRelation;
     replyToEvent?: MatrixEvent;
-    roomContext: IRoomState;
+    roomContext: Pick<IRoomState, "timelineRenderingType" | "room">;
 }
 
 export async function sendMessage(
@@ -177,7 +177,7 @@ export async function sendMessage(
 
 interface EditMessageParams {
     mxClient: MatrixClient;
-    roomContext: IRoomState;
+    roomContext: Pick<IRoomState, "timelineRenderingType">;
     editorStateTransfer: EditorStateTransfer;
 }