fix(perf): hoist lotusTerminal setting out of Message component (Perf-10)

Previously every visible Message subscribed to settingsAtom via useSetting,
creating O(80) active atom subscriptions. Now RoomTimeline reads it once
and passes it down as a prop, reducing subscriptions to 1.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lotus Bot
2026-05-21 12:07:42 -04:00
parent d707c4441c
commit 5e740496c9
2 changed files with 5 additions and 1 deletions
+2
View File
@@ -452,6 +452,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
@@ -1112,6 +1113,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
legacyUsernameColor={legacyUsernameColor || direct}
hour24Clock={hour24Clock}
dateFormatString={dateFormatString}
lotusTerminal={!!lotusTerminal}
>
{mEvent.isRedacted() ? (
<RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
+3 -1
View File
@@ -726,6 +726,7 @@ export type MessageProps = {
legacyUsernameColor?: boolean;
hour24Clock: boolean;
dateFormatString: string;
lotusTerminal?: boolean;
};
export const Message = React.memo(as<'div', MessageProps>(
(
@@ -757,6 +758,7 @@ export const Message = React.memo(as<'div', MessageProps>(
legacyUsernameColor,
hour24Clock,
dateFormatString,
lotusTerminal: lotusTerminalProp,
children,
...props
},
@@ -770,7 +772,7 @@ export const Message = React.memo(as<'div', MessageProps>(
? []
: (readPositions.get(mEvent.getId() ?? '') ?? []);
const isMine = mEvent.getSender() === mx.getUserId();
const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
const lotusTerminal = lotusTerminalProp;
const [hover, setHover] = useState(false);
const { hoverProps } = useHover({ onHoverChange: setHover });