Skip to content

Room list: avoid excessive re-renders on room list store update or filter change#32663

Merged
florianduros merged 7 commits intodevelopfrom
florianduros/room-list-performance
Mar 2, 2026
Merged

Room list: avoid excessive re-renders on room list store update or filter change#32663
florianduros merged 7 commits intodevelopfrom
florianduros/room-list-performance

Conversation

@florianduros
Copy link
Copy Markdown
Member

@florianduros florianduros commented Feb 27, 2026

May fix #32574
Needs #32677 to fix EC tests

  • Don't clear all the item vms on room list update. Only on space change
  • Avoid to clear all the items vms when changing filters
  • Avoid to re-render all the filters on room list update

Room list item vms are cleared when scrolling:

/**
* Update which rooms are currently visible.
* Called by the view when scroll position changes.
* Disposes of view models for rooms no longer visible.
*/
public updateVisibleRooms(startIndex: number, endIndex: number): void {
const allRoomIds = this.roomIds;
const newVisibleIds = allRoomIds.slice(startIndex, Math.min(endIndex, allRoomIds.length));
const newVisibleSet = new Set(newVisibleIds);
// Dispose view models for rooms no longer visible
for (const [roomId, viewModel] of this.roomItemViewModels.entries()) {
if (!newVisibleSet.has(roomId)) {
viewModel.dispose();
this.roomItemViewModels.delete(roomId);
}
}
}

Before (start at 20sec)

Screen.Recording.2026-02-26.at.18.37.01.mov

After

Untitled.mov

Clearing all the item vms at every room list change is causing massive
re-render of all the room list items. References to the vms are already
removed when out of view (see RoomListViewMode.updateVisibleRooms) and
handled by GC.
RoomListView re-renders on update but the filters (children) don't need
to.

Add a memo to avoid excessive-rerenders.
this.updateRoomsMap(this.roomsResult);

// Clear view models since room list changed
this.clearViewModels();
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose the flip side of this is that some of these VMs will had around int he map until removed. But as you said when the visible rooms change they will be cleaned up.

…m list is updated

The filterKeys are passed in the virtuoso context so it should reduce
internal computing

The filter ids array has always the same value, there is no point to
create a new instance.
@florianduros florianduros force-pushed the florianduros/room-list-performance branch from e357d4e to 36646e4 Compare February 27, 2026 15:33
florianduros added a commit that referenced this pull request Mar 2, 2026
The room list needs to listen to `CallEvent.Participants` to be able to
display the Call icon. This was working before
#32663 due to an excessive
re-renders or relying on the notification events.
github-merge-queue bot pushed a commit that referenced this pull request Mar 2, 2026
* feat(call store): add new `CallEvent.Participants` event

The room list needs to listen to `CallEvent.Participants` to be able to
display the Call icon. This was working before
#32663 due to an excessive
re-renders or relying on the notification events.

* chore(room list): listen to `CallEvent.Participants`

* test(room list): add test for new listener

* test(call store): add tests for `CallEvent.Particpants`

* Revert "feat(call store): add new `CallEvent.Participants` event"

This reverts commit d2a7a00.

* Revert "test(call store): add tests for `CallEvent.Particpants`"

This reverts commit 4455182.

* chore(room list): listen to `Call#CallEvent.Participants` insteaf of listening to `CallStore`

* test(room list): update added test

* fix(room list): clean properly listeners on previous call

* test(room list): add missing test

* fix(room list): don't use trackListeners to avoid leaking memory when listening to call event

* fix(room list): listen to participant change when vm is created

* test(room list): add test case when there is an existing call
Copy link
Copy Markdown
Member

@t3chguy t3chguy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks sane

@florianduros florianduros added this pull request to the merge queue Mar 2, 2026
Merged via the queue into develop with commit 3cfba32 Mar 2, 2026
48 checks passed
@florianduros florianduros deleted the florianduros/room-list-performance branch March 2, 2026 18:06
alexlebens pushed a commit to alexlebens/infrastructure that referenced this pull request Mar 10, 2026
This PR contains the following updates:

| Package | Update | Change |
|---|---|---|
| [vectorim/element-web](https://github.com/element-hq/element-web) | patch | `v1.12.11` → `v1.12.12` |

---

### Release Notes

<details>
<summary>element-hq/element-web (vectorim/element-web)</summary>

### [`v1.12.12`](https://github.com/element-hq/element-web/releases/tag/v1.12.12)

[Compare Source](element-hq/element-web@v1.12.11...v1.12.12)

#### ✨ Features

- Add stable support for MSC4380 invite blocking ([#&#8203;31966](element-hq/element-web#31966)). Contributed by [@&#8203;richvdh](https://github.com/richvdh).
- Hide the names of banned users behind a spoiler tag ([#&#8203;32424](element-hq/element-web#32424)). Contributed by [@&#8203;andybalaam](https://github.com/andybalaam).
- Room list: remove bold effect on selected room ([#&#8203;32593](element-hq/element-web#32593)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Use Compound buttons in auth screens ([#&#8203;32562](element-hq/element-web#32562)). Contributed by [@&#8203;t3chguy](https://github.com/t3chguy).
- Track room list sorting algorithm changes ([#&#8203;32556](element-hq/element-web#32556)). Contributed by [@&#8203;MidhunSureshR](https://github.com/MidhunSureshR).
- Update `sso_redirect_options` to work for Native OIDC ([#&#8203;32537](element-hq/element-web#32537)). Contributed by [@&#8203;t3chguy](https://github.com/t3chguy).

#### 🐛 Bug Fixes

- Room list: avoid excessive re-renders on room list store update or filter change ([#&#8203;32663](element-hq/element-web#32663)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Room list: listen to call event to check number of participants ([#&#8203;32677](element-hq/element-web#32677)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Fix invite-specific join errors not being shown ([#&#8203;32621](element-hq/element-web#32621)). Contributed by [@&#8203;Half-Shot](https://github.com/Half-Shot).
- Prevent logging lots of "Browser unsupported" lines ([#&#8203;32647](element-hq/element-web#32647)). Contributed by [@&#8203;Half-Shot](https://github.com/Half-Shot).
- Update critical gradient for room status bar ([#&#8203;32575](element-hq/element-web#32575)). Contributed by [@&#8203;Half-Shot](https://github.com/Half-Shot).
- Room list: avoid header overflowing when too long ([#&#8203;32645](element-hq/element-web#32645)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Room list: center focus outline of room list item ([#&#8203;32637](element-hq/element-web#32637)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Fix misaligned cross in complete security dialog ([#&#8203;32614](element-hq/element-web#32614)). Contributed by [@&#8203;dbkr](https://github.com/dbkr).
- Room list: fix keyboard navigation ([#&#8203;32585](element-hq/element-web#32585)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Don't show empty privacy section ([#&#8203;32582](element-hq/element-web#32582)). Contributed by [@&#8203;dbkr](https://github.com/dbkr).
- Disable room list image dragging ([#&#8203;32590](element-hq/element-web#32590)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Update UserMenu theme toggle to use IconButton ([#&#8203;32591](element-hq/element-web#32591)). Contributed by [@&#8203;t3chguy](https://github.com/t3chguy).
- Room list: make room list item scales with large font size ([#&#8203;32523](element-hq/element-web#32523)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My41OS4yIiwidXBkYXRlZEluVmVyIjoiNDMuNTkuMiIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOlsiYXV0b21lcmdlIiwiaW1hZ2UiXX0=-->

Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/4596
Co-authored-by: Renovate Bot <renovate-bot@alexlebens.net>
Co-committed-by: Renovate Bot <renovate-bot@alexlebens.net>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clicking on a room in the room list (redesign) doesn't take effect until (seemingly) timeline loading is complete

3 participants