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:
@@ -452,6 +452,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
|
const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
|
||||||
const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
|
const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
|
||||||
const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
|
const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
|
||||||
|
const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
|
||||||
|
|
||||||
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
|
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
|
||||||
const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
|
const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
|
||||||
@@ -1112,6 +1113,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
legacyUsernameColor={legacyUsernameColor || direct}
|
legacyUsernameColor={legacyUsernameColor || direct}
|
||||||
hour24Clock={hour24Clock}
|
hour24Clock={hour24Clock}
|
||||||
dateFormatString={dateFormatString}
|
dateFormatString={dateFormatString}
|
||||||
|
lotusTerminal={!!lotusTerminal}
|
||||||
>
|
>
|
||||||
{mEvent.isRedacted() ? (
|
{mEvent.isRedacted() ? (
|
||||||
<RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
|
<RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
|
||||||
|
|||||||
@@ -726,6 +726,7 @@ export type MessageProps = {
|
|||||||
legacyUsernameColor?: boolean;
|
legacyUsernameColor?: boolean;
|
||||||
hour24Clock: boolean;
|
hour24Clock: boolean;
|
||||||
dateFormatString: string;
|
dateFormatString: string;
|
||||||
|
lotusTerminal?: boolean;
|
||||||
};
|
};
|
||||||
export const Message = React.memo(as<'div', MessageProps>(
|
export const Message = React.memo(as<'div', MessageProps>(
|
||||||
(
|
(
|
||||||
@@ -757,6 +758,7 @@ export const Message = React.memo(as<'div', MessageProps>(
|
|||||||
legacyUsernameColor,
|
legacyUsernameColor,
|
||||||
hour24Clock,
|
hour24Clock,
|
||||||
dateFormatString,
|
dateFormatString,
|
||||||
|
lotusTerminal: lotusTerminalProp,
|
||||||
children,
|
children,
|
||||||
...props
|
...props
|
||||||
},
|
},
|
||||||
@@ -770,7 +772,7 @@ export const Message = React.memo(as<'div', MessageProps>(
|
|||||||
? []
|
? []
|
||||||
: (readPositions.get(mEvent.getId() ?? '') ?? []);
|
: (readPositions.get(mEvent.getId() ?? '') ?? []);
|
||||||
const isMine = mEvent.getSender() === mx.getUserId();
|
const isMine = mEvent.getSender() === mx.getUserId();
|
||||||
const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
|
const lotusTerminal = lotusTerminalProp;
|
||||||
|
|
||||||
const [hover, setHover] = useState(false);
|
const [hover, setHover] = useState(false);
|
||||||
const { hoverProps } = useHover({ onHoverChange: setHover });
|
const { hoverProps } = useHover({ onHoverChange: setHover });
|
||||||
|
|||||||
Reference in New Issue
Block a user