perf(timeline): memoize VList timeline items to prevent mass re-renders

[Just-Insane]

Description

Wraps each VList timeline item in React.memo so that only the items whose props actually changed re-render when state updates occur (e.g. typing indicators arriving, read receipts updating, or new messages landing while the user is scrolled away from the bottom).

Props passed to each item beyond data and renderRef — isHighlighted, isEditing, isReplying, isOpenThread, settingsEpoch — exist solely to give React.memo's shallow-equality comparator fine-grained control: changing any of them causes only the one affected item to re-render rather than the entire visible list.

Also makes mutationVersion optional (default 0) in UseProcessedTimelineOptions so call sites that don't participate in the mutation tracking (e.g. ThreadDrawer) continue to compile without changes.

Fixes #

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

AI disclosure:

• Fully AI generated (explain what all the generated code does in moderate detail).

useProcessedTimeline.ts — added a stableRefsCache (a useRef<Map<string, ProcessedEvent>>) that keeps the previous render's ProcessedEvent objects alive. On each useMemo run, if mutationVersion hasn't changed, events whose identity hasn't changed are returned from the cache (same object reference) rather than newly constructed. This means React.memo sees no prop change for stable items and skips their render.

RoomTimeline.tsx — TimelineItem is a React.memo-wrapped component declared outside the parent function so it is never re-created. A renderFnRef ref captures the render function so TimelineItem itself only needs a stable ref in props, not the function. settingsEpoch is a useRef({}).current that is replaced with {} whenever any layout/display setting changes, forcing all visible items to pick up the new settings in one pass.

[Just-Insane]

Added a follow-up fix in the latest commit: setAtBottom(true) is now called synchronously when scrolling to the bottom in the 80ms timer and pendingReadyRef recovery paths, immediately before setIsReady(true). This prevents the "Jump to Latest" button from flashing for one render cycle between isReady becoming true and VList's async onScroll confirming the bottom position.

[Copilot]

Pull request overview

This PR focuses on reducing unnecessary timeline re-renders and improving perceived performance when navigating within/between rooms by memoizing per-item rendering and introducing a session-scoped VList scroll/measurement cache.

Changes:

• Memoize individual VList timeline rows via React.memo and add stable-reference reuse in useProcessedTimeline to reduce re-renders.
• Track timeline “content mutation” separately from event arrivals via a new mutationVersion in useTimelineSync, and plumb it into useProcessedTimeline.
• Add a per-room (in-memory) scroll + VList cache snapshot and restore it on revisit to skip the initial stabilization delay; refine notification jumping behavior to avoid unnecessary historical timeline loads.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/app/utils/roomScrollCache.ts	Adds an in-memory per-room scroll/VList cache snapshot store.
src/app/utils/roomScrollCache.test.ts	Unit tests for the new scroll cache utility.
src/app/hooks/useNotificationJumper.ts	Avoids navigating via eventId when the target event is already in the live timeline; retries when live timeline is initially empty.
src/app/hooks/timeline/useTimelineSync.ts	Introduces mutationVersion and a shared mutation trigger to distinguish content mutations from new-event arrivals.
src/app/hooks/timeline/useProcessedTimeline.ts	Adds stable-ref caching and filters poll response/end events from processed output.
src/app/hooks/timeline/useProcessedTimeline.test.ts	Adds coverage for stable-ref reuse behavior and poll-response filtering.
src/app/features/room/RoomTimeline.tsx	Wraps timeline item rendering in a memoized component; adds scroll/cache restore + persistence and programmatic-scroll guarding.
.changeset/perf-timeline-scroll-cache.md	Changeset entry for scroll-cache optimization.
.changeset/perf-timeline-item-memo.md	Changeset entry for item memoization optimization.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

showLoadingPlaceholders no longer checks timelineSync.eventsLength === 0, so for rooms where canPaginateBack is true it will render placeholders for every row and hide real timeline items. Align the condition with vListItemCount (only show placeholders when there are zero events and we're still loading/back-paginating the initial view).

Suggested change

	const showLoadingPlaceholders =
	const showLoadingPlaceholders =
	timelineSync.eventsLength === 0 &&

[Copilot]

The stable-ref reuse logic only compares a few derived fields (itemIndex/collapsed/dividers/sender) and can return a cached ProcessedEvent that holds a stale mEvent/timelineSet when the SDK provides a new MatrixEvent instance for the same eventId (e.g. timeline reset/rebuild). Include prev.mEvent === mEvent and prev.timelineSet === timelineSet (or otherwise ensure the cached object always points at the current event/timelineSet) before reusing the old reference.

[Copilot]

roomScrollCache is keyed only by roomId, but the app supports multi-account sessions. This can cause scroll state (and VList cache snapshots) to bleed across accounts that share the same roomId, leading to incorrect scroll restoration. Consider keying by a compound key (e.g. ${userId}:${roomId} or activeSessionId) or exposing session-scoped instances of the cache.

Suggested change

	/** Session-scoped, per-room scroll cache. Not persisted across page reloads. */
	const scrollCacheMap = new Map<string, RoomScrollCache>();
	export const roomScrollCache = {
	save(roomId: string, data: RoomScrollCache): void {
	scrollCacheMap.set(roomId, data);
	},
	load(roomId: string): RoomScrollCache | undefined {
	return scrollCacheMap.get(roomId);
	},
	export type RoomScrollCacheStore = {
	save(roomId: string, data: RoomScrollCache): void;
	load(roomId: string): RoomScrollCache | undefined;
	};
	/** Session-scoped, per-room scroll cache. Not persisted across page reloads. */
	const scrollCacheMap = new Map<string, RoomScrollCache>();
	function toCacheKey(sessionId: string, roomId: string): string {
	return `${sessionId}:${roomId}`;
	}
	export const roomScrollCache = {
	save(sessionId: string, roomId: string, data: RoomScrollCache): void {
	scrollCacheMap.set(toCacheKey(sessionId, roomId), data);
	},
	load(sessionId: string, roomId: string): RoomScrollCache | undefined {
	return scrollCacheMap.get(toCacheKey(sessionId, roomId));
	},
	forSession(sessionId: string): RoomScrollCacheStore {
	return {
	save(roomId: string, data: RoomScrollCache): void {
	roomScrollCache.save(sessionId, roomId, data);
	},
	load(roomId: string): RoomScrollCache | undefined {
	return roomScrollCache.load(sessionId, roomId);
	},
	};
	},

[Copilot]

The cached VList cache snapshot is always passed into VList, even when viewing a historical slice via eventId. Since the cached snapshot was recorded for the live timeline indices, applying it to a sparse eventId timeline can yield incorrect size estimates/scroll positioning. Consider passing cache only when !eventId (or maintaining separate caches for live vs eventId timelines).

Suggested change

	cache={scrollCacheForRoomRef.current?.cache}
	cache={!eventId ? scrollCacheForRoomRef.current?.cache : undefined}