diff --git a/.changeset/fix-perf-rerender-reduction.md b/.changeset/fix-perf-rerender-reduction.md new file mode 100644 index 000000000..f04f89e03 --- /dev/null +++ b/.changeset/fix-perf-rerender-reduction.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Reduce unnecessary re-renders: memoize VList style in RoomTimeline, remove per-message UnreadNotifications listener from ThreadReplyChip, and reset presence state correctly when navigating between user profiles. diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index fb4b33515..5fee5651c 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -205,6 +205,17 @@ export function RoomTimeline({ const [shift, setShift] = useState(false); const [topSpacerHeight, setTopSpacerHeight] = useState(0); + const vListStyle = useMemo( + () => ({ + flex: 1, + minHeight: 0, + display: 'flex', + flexDirection: 'column' as const, + paddingTop: topSpacerHeight > 0 ? topSpacerHeight : config.space.S600, + paddingBottom: config.space.S600, + }), + [topSpacerHeight] + ); const topSpacerHeightRef = useRef(0); const mountScrollWindowRef = useRef(Date.now() + 3000); @@ -839,14 +850,7 @@ export function RoomTimeline({ data={processedEvents} shift={shift} className={css.messageList} - style={{ - flex: 1, - minHeight: 0, - display: 'flex', - flexDirection: 'column', - paddingTop: topSpacerHeight > 0 ? topSpacerHeight : config.space.S600, - paddingBottom: config.space.S600, - }} + style={vListStyle} onScroll={handleVListScroll} > {(eventData, index) => { diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx index 421561616..3c812959d 100644 --- a/src/app/features/room/RoomView.tsx +++ b/src/app/features/room/RoomView.tsx @@ -146,7 +146,7 @@ export function RoomView({ eventId }: { eventId?: string }) { style={ room.isCallRoom() && screenSize === ScreenSize.Desktop ? { maxWidth: toRem(399), minWidth: toRem(399) } - : {} + : undefined } > diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts index f1b858422..a54d05a7b 100644 --- a/src/app/hooks/useUserPresence.ts +++ b/src/app/hooks/useUserPresence.ts @@ -29,6 +29,8 @@ export const useUserPresence = (userId: string): UserPresence | undefined => { const [presence, setPresence] = useState(() => (user ? getUserPresence(user) : undefined)); useEffect(() => { + setPresence(user ? getUserPresence(user) : undefined); + const updatePresence: UserEventHandlerMap[UserEvent.Presence] = (event, u) => { if (u.userId === user?.userId) { setPresence(getUserPresence(user));