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/hooks/room/useRoomMemberProfile.ts

@@ -7,10 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { RoomMember } from "matrix-js-sdk/src/matrix";
-import { useContext, useMemo } from "react";
+import { useMemo } from "react";
 
-import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
+import { TimelineRenderingType } from "../../contexts/RoomContext";
 import { useSettingValue } from "../useSettings";
+import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";
 
 export function useRoomMemberProfile({
     userId = "",
@@ -21,7 +22,7 @@ export function useRoomMemberProfile({
     member?: RoomMember | null;
     forceHistorical?: boolean;
 }): RoomMember | undefined | null {
-    const context = useContext(RoomContext);
+    const context = useScopedRoomContext("room", "timelineRenderingType");
     const useOnlyCurrentProfiles = useSettingValue("useOnlyCurrentProfiles");
 
     const member = useMemo(() => {