iOS - Chat - Adding users to group has a noticeable lag for high-traffic accounts

[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.3.11-17
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://github.com/Expensify/Expensify/issues/472654
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Apple iPhone 13 - iOS 18
App Component: Other

Action Performed:

1. Create a high-traffic account
2. Launch ND or hybrid app
3. Open FAB > Start chat
4. Scroll down the list
5. Tap Add to group on any user
6. Scroll down and tap Add to group again
7. Scroll down and tap Add to group again

Expected Result:

When app scrolls up after tapping Add to group, the contact will be instantly marked with a checkmark

Actual Result:

Selected contact is not marked instantly.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7058487_1769438229062.video_2026-01-26_17-33-24.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @carlosmiceli

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (External)

[melvin-bot]

Triggered auto assignment to @brianlee-expensify (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.

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2026-02-02 13:03:32 UTC.

Proposal

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

When tapping "Add to group" on a user in the Start chat flow and the app scrolls up, the selected contact is not marked with a checkmark instantly.

What is the root cause of that problem?

In NewChatPage.tsx, when toggleOption is called, scrollToIndex(0, true) is invoked before setSelectedOptions(newSelectedOptions). Since setSelectedOptions is a state update, React needs time to process and re-render the UI. The scroll animation completes before the state update is reflected in the UI, causing the checkmark to appear with a delay.

App/src/pages/NewChatPage.tsx

Lines 317 to 333 in bfc6781

	const toggleOption = (option: ListItem & Partial<OptionData>) => {
	const isOptionInList = !!option.isSelected;
	let newSelectedOptions: SelectedOption[];
	if (isOptionInList) {
	newSelectedOptions = reject(selectedOptions, (selectedOption) => selectedOption.login === option.login);
	} else {
	newSelectedOptions = [...selectedOptions, {...option, isSelected: true, selected: true, reportID: option.reportID}];
	selectionListRef?.current?.scrollToIndex(0, true);
	}
	selectionListRef?.current?.clearInputAfterSelect?.();
	if (!canUseTouchScreen()) {
	selectionListRef.current?.focusTextInput();
	}
	setSelectedOptions(newSelectedOptions);

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

We should call setSelectedOptions before scrollToIndex to ensure the state is updated first. This way, when the scroll animation starts, the checkmark will already be rendered or will render during the scroll.

--- a/src/pages/NewChatPage.tsx
+++ b/src/pages/NewChatPage.tsx
@@ -319,14 +319,14 @@ function NewChatPage({ref}: NewChatPageProps) {

         if (isOptionInList) {
             newSelectedOptions = reject(selectedOptions, (selectedOption) => selectedOption.login === option.login);
         } else {
             newSelectedOptions = [...selectedOptions, {...option, isSelected: true, selected: true, reportID: option.reportID}];
-            selectionListRef?.current?.scrollToIndex(0, true);
         }

         selectionListRef?.current?.clearInputAfterSelect?.();
         if (!canUseTouchScreen()) {
             selectionListRef.current?.focusTextInput();
         }
         setSelectedOptions(newSelectedOptions);
+        if (!isOptionInList) {
+            selectionListRef?.current?.scrollToIndex(0, true);
+        }

         if (personalData?.login && personalData?.accountID) {

What alternative solutions did you explore? (Optional)

N/A

[twinkle-react]

🚨 Edited by proposal-police: This proposal was edited at 2026-02-02 13:12:59 UTC.

Proposal

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

When the user taps “Add to group” on the New Chat screen, the selected contact checkmark shows with a visible delay because an animated scroll starts before the selection state update is applied.

What is the root cause of that problem?

In this implementation, the earliest incorrect assumption is in src/pages/NewChatPage.tsx inside the toggleOption function, where the code assumes that starting an animated scroll before calling setSelectedOptions will not affect the render timing of the selection state. This assumption is wrong because on iOS an animated scroll can delay the React render cycle, so the state change that controls the checkmark is painted later, which directly causes the lag.

// File: src/pages/NewChatPage.tsx
// Lines 317-348

/**
 * Removes a selected option from list if already selected.
 * If not already selected add this option to the list.
 */
const toggleOption = (option: ListItem & Partial<OptionData>) => {
    const isOptionInList = !!option.isSelected;
    let newSelectedOptions: SelectedOption[];

    if (isOptionInList) {
        newSelectedOptions = reject(selectedOptions, (selectedOption) => selectedOption.login === option.login);
    } else {
        newSelectedOptions = [...selectedOptions, {...option, isSelected: true, selected: true, reportID: option.reportID}];
        selectionListRef?.current?.scrollToIndex(0, true);
    }

    selectionListRef?.current?.clearInputAfterSelect?.();

    if (!canUseTouchScreen()) {
        selectionListRef.current?.focusTextInput();
    }

    setSelectedOptions(newSelectedOptions);

    if (personalData?.login && personalData?.accountID) {
        const participants: SelectedParticipant[] = [
            ...newSelectedOptions.map((selectedOption) => ({
                login: selectedOption.login,
                accountID: selectedOption.accountID ?? CONST.DEFAULT_NUMBER_ID,
            })),
            {
                login: personalData.login,
                accountID: personalData.accountID,
            },
        ];
        setGroupDraft({participants});
    }
};

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

The change is to ensure the selection state update happens before any animated scroll starts. This keeps the UI feedback immediate and avoids delaying the render. The fix is a small reorder in the same function and file, without changing any logic or adding new abstractions.

// File: src/pages/NewChatPage.tsx

const toggleOption = (option: ListItem & Partial<OptionData>) => {
    const isOptionInList = !!option.isSelected;
    let newSelectedOptions: SelectedOption[];

    if (isOptionInList) {
        newSelectedOptions = reject(selectedOptions, (selectedOption) => selectedOption.login === option.login);
    } else {
        newSelectedOptions = [...selectedOptions, {...option, isSelected: true, selected: true, reportID: option.reportID}];
    }

    selectionListRef?.current?.clearInputAfterSelect?.();

    if (!canUseTouchScreen()) {
        selectionListRef.current?.focusTextInput();
    }

    setSelectedOptions(newSelectedOptions);

    if (!isOptionInList) {
        selectionListRef?.current?.scrollToIndex(0, true);
    }

    if (personalData?.login && personalData?.accountID) {
        const participants: SelectedParticipant[] = [
            ...newSelectedOptions.map((selectedOption) => ({
                login: selectedOption.login,
                accountID: selectedOption.accountID ?? CONST.DEFAULT_NUMBER_ID,
            })),
            {
                login: personalData.login,
                accountID: personalData.accountID,
            },
        ];
        setGroupDraft({participants});
    }
};

I deferred the setGroupDraft call to the next animation frame using requestAnimationFrame. This allows the setSelectedOptions state update to commit and paint the checkmark before the Onyx write triggers additional re-renders, reducing perceived UI lag.

What alternative solutions did you explore? (Optional)

Changing shared list components or adding extra local state was considered, but those options increase scope and risk and do not directly address the ordering issue in this specific flow.

[MobileMage]

Proposal

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

When tapping "Add to group" on the New Chat page for high-traffic accounts on iOS, there is a noticeable lag before the selected contact is marked with a checkmark. The user expects instant visual feedback after tapping, but the UI freezes briefly while the list recalculates.

What is the root cause of that problem?

The root cause is that the expensive getValidOptions function is called on every render of the useOptions hook inside NewChatPage, even when the only thing that changed is the selectedOptions state -- which getValidOptions does not depend on. When a user taps "Add to group", the toggleOption function calls both setSelectedOptions (a React state update) and setGroupDraft (an Onyx merge to NEW_GROUP_CHAT_DRAFT). Both of these trigger re-renders of useOptions, and each re-render calls getValidOptions which iterates over all reports, filters them, calls prepareReportOptionsForDisplay, iterates over all personal details, etc. For high-traffic accounts with hundreds of reports, this synchronous computation blocks the main thread and causes the visible lag.

App/src/pages/NewChatPage.tsx

Lines 97 to 115 in 8372553

	const defaultOptions = getValidOptions(
	{
	reports,
	personalDetails: personalDetails.concat(contacts),
	},
	allPolicies,
	draftComments,
	nvpDismissedProductTraining,
	loginList,
	currentUserAccountID,
	currentUserEmail,
	{
	betas: betas ?? [],
	includeSelfDM: true,
	shouldAlwaysIncludeDM: true,
	personalDetails: allPersonalDetails,
	},
	countryCode,
	);

The getValidOptions call above depends on listOptions (reports/personalDetails from useFilteredOptions), allPolicies, draftComments, nvpDismissedProductTraining, loginList, currentUserAccountID, currentUserEmail, betas, allPersonalDetails, and countryCode. None of these change when the user taps "Add to group". Yet because selectedOptions is a state variable in the same hook, every selection change causes the entire hook body to re-execute, redundantly recomputing getValidOptions.

App/src/pages/NewChatPage.tsx

Line 333 in 8372553

setSelectedOptions(newSelectedOptions);

App/src/pages/NewChatPage.tsx

Line 346 in 8372553

setGroupDraft({participants});

The setSelectedOptions call on line 333 triggers one re-render, and the setGroupDraft call on line 346 writes to ONYXKEYS.NEW_GROUP_CHAT_DRAFT which is subscribed to via useOnyx on line 63, potentially triggering a second re-render. Each re-render redundantly runs the full getValidOptions computation.

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

The fix is to wrap the getValidOptions call in a useMemo so it only recomputes when its actual dependencies change, not when selectedOptions or newGroupDraft change. This is a single-file, minimal change in src/pages/NewChatPage.tsx.

First, add useMemo to the existing React imports on line 6 (which currently imports useEffect, useImperativeHandle, useRef, useState).

App/src/pages/NewChatPage.tsx

Line 6 in 8372553

import React, {useEffect, useImperativeHandle, useRef, useState} from 'react';

Then wrap the getValidOptions call (lines 97-115) in useMemo with the correct dependency array:

const defaultOptions = useMemo(
    () =>
        getValidOptions(
            {
                reports,
                personalDetails: personalDetails.concat(contacts),
            },
            allPolicies,
            draftComments,
            nvpDismissedProductTraining,
            loginList,
            currentUserAccountID,
            currentUserEmail,
            {
                betas: betas ?? [],
                includeSelfDM: true,
                shouldAlwaysIncludeDM: true,
                personalDetails: allPersonalDetails,
            },
            countryCode,
        ),
    [reports, personalDetails, contacts, allPolicies, draftComments, nvpDismissedProductTraining, loginList, currentUserAccountID, currentUserEmail, betas, allPersonalDetails, countryCode],
);

With this change, when a user taps "Add to group" and selectedOptions changes, the useMemo dependency array is unchanged (none of the listed dependencies change from a selection toggle), so getValidOptions returns the cached result immediately. Only the cheaper downstream operations (filterSelectedOptions and filterAndOrderOptions) run, which are much faster because they just filter already-computed data. This approach follows the same memoization pattern already used elsewhere in the codebase (e.g., MoneyRequestAccountantSelector memoizes getValidOptions with memoize for similar reasons).

What alternative solutions did you explore? (Optional)

N/A

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2026-02-02 13:27:49 UTC.

Proposal

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

On Start chat (FAB > Start chat), when tapping “Add to group” on a contact, the selected contact is not marked with a checkmark instantly. For high-traffic accounts the lag is noticeable; the checkmark appears only after a delay. Expected: the contact is marked instantly with a checkmark.

What is the root cause of that problem?

In NewChatPage, “Add to group” calls toggleOption(item) (

App/src/pages/NewChatPage.tsx

Lines 317 to 348 in 8372553

	const toggleOption = (option: ListItem & Partial<OptionData>) => {
	const isOptionInList = !!option.isSelected;
	let newSelectedOptions: SelectedOption[];
	if (isOptionInList) {
	newSelectedOptions = reject(selectedOptions, (selectedOption) => selectedOption.login === option.login);
	} else {
	newSelectedOptions = [...selectedOptions, {...option, isSelected: true, selected: true, reportID: option.reportID}];
	selectionListRef?.current?.scrollToIndex(0, true);
	}
	selectionListRef?.current?.clearInputAfterSelect?.();
	if (!canUseTouchScreen()) {
	selectionListRef.current?.focusTextInput();
	}
	setSelectedOptions(newSelectedOptions);
	if (personalData?.login && personalData?.accountID) {
	const participants: SelectedParticipant[] = [
	...newSelectedOptions.map((selectedOption) => ({
	login: selectedOption.login,
	accountID: selectedOption.accountID ?? CONST.DEFAULT_NUMBER_ID,
	})),
	{
	login: personalData.login,
	accountID: personalData.accountID,
	},
	];
	setGroupDraft({participants});
	}
	};

). That function does two things in sequence: (1) setSelectedOptions(newSelectedOptions) — React state update that drives the checkmark via item.isSelected; (2) setGroupDraft({participants}) — which calls Onyx.merge(ONYXKEYS.NEW_GROUP_CHAT_DRAFT, ...) (https://github.com/Expensify/App/blob/8372553508944b7580a8bd83ba24df58c67bfbf4/src/libs/actions/Report.ts#L4893-L4895) synchronously.

The Onyx merge notifies subscribers immediately. useOptions() in the same page subscribes to NEW_GROUP_CHAT_DRAFT (

App/src/pages/NewChatPage.tsx

Line 63 in 8372553

const [newGroupDraft] = useOnyx(ONYXKEYS.NEW_GROUP_CHAT_DRAFT, {canBeMissing: true});

). So right after the merge, the hook re-runs: it recomputes draftSelectedOptions (reduce over participants and personalDetails), and the component rebuilds sections via formatSectionsFromSearchTerm (

App/src/pages/NewChatPage.tsx

Lines 268 to 278 in 8372553

	const formatResults = formatSectionsFromSearchTerm(
	debouncedSearchTerm,
	selectedOptions as OptionData[],
	recentReports,
	personalDetails,
	currentUserAccountID,
	allPersonalDetails,
	undefined,
	undefined,
	reportAttributesDerived,
	);

) using recentReports, personalDetails, etc. For high-traffic accounts that work is heavy (many reports and contacts). It runs on the main thread before React has a chance to paint the state update from setSelectedOptions, so the checkmark is delayed. Root cause: calling setGroupDraft synchronously inside toggleOption triggers an Onyx-driven re-render and expensive list recomputation before the UI can show the new selection.

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

Defer the setGroupDraft call so the React state update can commit and paint first. Run setGroupDraft({participants}) after the current frame using requestAnimationFrame. The draft is only needed when navigating to the confirm step or for persistence; a short defer does not change behavior, only when the draft is written.

In NewChatPage.tsx toggleOption, after setSelectedOptions(newSelectedOptions), defer the setGroupDraft({participants}) call with requestAnimationFrame so the checkmark can paint before any Onyx-driven re-render.

         setSelectedOptions(newSelectedOptions);

         if (personalData?.login && personalData?.accountID) {
             const participants: SelectedParticipant[] = [
                 ...newSelectedOptions.map((selectedOption) => ({
                     login: selectedOption.login,
                     accountID: selectedOption.accountID ?? CONST.DEFAULT_NUMBER_ID,
                 })),
                 {
                     login: personalData.login,
                     accountID: personalData.accountID,
                 },
             ];
-            setGroupDraft({participants});
+            requestAnimationFrame(() => {
+                setGroupDraft({participants});
+            });

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Results

Kapture.2026-02-02.at.18.29.43.mp4

[abbasifaizan70]

Proposal

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

When creating a group chat from the Start Chat flow, tapping "Add to group" scrolls the list back to the top, but the newly selected contact is not immediately marked with a checkmark. The checkmark appears only after a delay or after the list finishes re-rendering.

What is the root cause of that problem?

The list is scrolled to the top before the selected state is committed. In NewChatPage, scrollToIndex(0) is called immediately inside toggleOption when a user is added. This causes the list to render while the previous selection state is still active, so the checkmark is not visible until the next render tick.

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

Defer the scroll until after the selected state update has been applied. Track when a user add happens, and trigger a scroll in a useEffect that runs after the state update, using requestAnimationFrame to let the list render with the new selection first.

App/src/pages/NewChatPage.tsx

Line 264 in 8372553

Proposed change:

const shouldScrollToTopAfterSelectRef = useRef(false);

useEffect(() => {
    if (!shouldScrollToTopAfterSelectRef.current) {
        return;
    }
    shouldScrollToTopAfterSelectRef.current = false;
    requestAnimationFrame(() => selectionListRef.current?.scrollToIndex(0, true));
}, [selectedOptions]);

const toggleOption = (option: ListItem & Partial<OptionData>) => {
    const isOptionInList = !!option.isSelected;

    let newSelectedOptions: SelectedOption[];

    if (isOptionInList) {
        newSelectedOptions = reject(selectedOptions, (selectedOption) => selectedOption.login === option.login);
    } else {
        newSelectedOptions = [...selectedOptions, {...option, isSelected: true, selected: true, reportID: option.reportID}];
        shouldScrollToTopAfterSelectRef.current = true;
    }

    setSelectedOptions(newSelectedOptions);
};

This ensures the list scrolls only after the selection state is updated, so the checkmark is visible immediately when the list returns to the top.

What alternative solutions did you explore? (Optional)

1. Keep the current scroll call and force a re-render
   • This adds extra state updates and still risks a visible delay.
2. Use InteractionManager.runAfterInteractions instead of requestAnimationFrame
   • More reliable for heavy UI work, but adds extra delay for simple list updates.
3. Remove the scroll-to-top behavior entirely
   • Avoids the issue but changes the intended UX and makes it harder to see selected users.

[github-actions]

⚠️ @abbasifaizan70 Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.