Members - Selection mode in RHP is laggy

[nlemma]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.2.97-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #77776
Email or phone of affected tester (no customers): jssdjiojsoidjninjsionj@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.1 / Chrome
App Component: Other

Action Performed:

1. Go to staging.new.expensify.com
2. Create a group chat with at least one other user.
3. Open group report header > Members.
4. Click Select all checkbox.

Expected Result:

Checkbox will be checked immediately.

Actual Result:

Checkbox is not checked immediately. Dropdown button appears first then the checkbox is checked.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7044730_1767983976132.6.mp4

View all open jobs on GitHub

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #77776

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #77776 - "Make SelectionListWithModal use new SelectionList" by @zfurtak (High confidence)
Related Issues: None identified

Recommendation: ROLL FORWARD

The causing PR is clearly identified and the fix is straightforward - the debounce mechanism needs to be adjusted or removed for selection mode changes. Rolling forward with a fix is preferable because:

1. The PR is a large refactor that migrates multiple components to use the new SelectionList
2. Multiple pages (ReportParticipantsPage, RoomMembersPage, WorkspaceMembersPage, WorkspaceCategoriesPage, and 7+ others) depend on these changes
3. A revert would be complex and may introduce regressions across all these components
4. The fix itself is simple and localized

📋 Detailed Analysis

Evidence

The issue occurs on staging only (not production), indicating it was introduced in the current deploy cycle. PR #77776 was merged on Jan 8, 2026 and is in the staging deploy checklist (#79227).

The video shows that when clicking "Select all" in Members page (RHP), there's a noticeable delay where the dropdown button appears first, then the checkbox gets checked. This matches the 300ms debounce delay introduced in the PR.

Root Cause

In PR #77776, the SelectionListWithModal component was refactored to use a debounced data mechanism:

// Added in SelectionListWithModal/index.tsx
const [, debouncedData, setDataState] = useDebouncedState<TItem[]>(
    data, 
    CONST.TIMING.SEARCH_OPTION_LIST_DEBOUNCE_TIME  // 300ms
);

The debounce was intended to prevent FlashList layout errors during rapid search/filtering updates. However, this debounce is also applied to the selectedItems calculation:

const selectedItems = useMemo(
    () =>
        selectedItemsProp ??
        debouncedData.filter((item) => {  // Using debounced data
            if (isSelected) {
                return isSelected(item);
            }
            return !!item.isSelected;
        }) ??
        [],
    [isSelected, debouncedData, selectedItemsProp],
);

When the user clicks "Select all", the selection state updates immediately, but the UI rendering is delayed by 300ms due to the debounce. This creates the laggy experience where the dropdown button appears before the checkbox state updates.

The debounce is beneficial for search/filter operations but should not delay selection state updates, which users expect to be instantaneous.

Suggested Fix

The fix should separate the debounce logic so it only applies to search/filter operations, not selection state changes. The selectedItems calculation should use the non-debounced data prop or be passed directly as a prop to avoid the delay.

[samranahm]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When selecting all members in the RoomMembersPage (group chat members in RHP), there is a visible lag. The dropdown button with bulk actions appears before the select-all checkbox updates visually, creating a janky user experience where the UI renders out of order.

What is the root cause of that problem?

The lag occurs due to unnecessary re-renders of the headerButtons component. The headerButtons useMemo has selectedMembers.length in its dependency array. When the user clicks "Select All":

toggleAllUsers() is called, updating selectedMembers state, this triggers a re-render and updates headerButtons. The dropdown button renders into view, then the selection list item checkboxes update

This causes the dropdown to appear before the checkbox, creating the laggy appearance.

The button visibility is determined by selectedMembers.length > 0, not the exact count.

What changes do you think we should make in order to solve the problem?

We should optimize the headerButtons useMemo dependencies to prevent unnecessary re-renders:

1. Instead of including selectedMembers.length in the dependency array, use a computed value that only changes when selections toggle on/off
2. Create a derived state variable hasSelectedMembers that is

  const hasSelectedMembers = selectedMembers.length > 0;

3. Use hasSelectedMembers in the dependency array instead of selectedMembers.length

What alternative solutions did you explore? (Optional)

N/A