[Due for payment 2026-03-19] [$250] [Performance] Optimize defaultExpensifyCardSelector (~13ms per render)

[luacmartins]

Problem

defaultExpensifyCardSelector takes ~13ms per render and contributes to slow Reports page navigation.

Solution

Optimize the selector (e.g. memoization with createSelector, reducing derived work, or splitting selectors). Use React Profiler / Chrome DevTools to validate improvements.

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022024628847700778961
• Upwork Job ID: 2024628847700778961
• Last Price Increase: 2026-02-19

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022024628847700778961

[husamdaifalla01-cmyk]

Proposal

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

defaultExpensifyCardSelector takes ~13ms per render and contributes to slow Reports page navigation. It runs on every render cycle in the always-mounted NavigationTabBar via useSearchTypeMenuSections, making its cost cumulative across all navigation events.

What is the root cause of that problem?

There are two compounding causes:

1. Unstable selector reference causes re-evaluation on every render.

In src/hooks/useSearchTypeMenuSections.ts, the selector is defined as an inline closure capturing translate:

const cardSelector = (allCards) => defaultExpensifyCardSelector(allCards, translate);

This creates a new function reference on every render. It is passed as a useOnyx dependency via [cardSelector], so Onyx sees the dependency array change on every render, invalidates its cache, and re-runs the full selector — even when the underlying card data has not changed.

2. The selector itself does unnecessary work.

defaultExpensifyCardSelector (in src/selectors/Card.ts) calls getCardFeedsForDisplay({}, allCards, translate). Since the first argument allCardFeeds is always {}, the entire first loop in getCardFeedsForDisplay (including getOriginalCompanyFeeds with its Object.fromEntries(Object.entries(...).filter(...))) is dead work. The function then iterates the entire card collection building a full cardFeedsForDisplay map, only for the selector to discard everything except the first entry via Object.values(cards)?.at(0).

So on every render: unstable reference triggers re-evaluation, re-evaluation iterates all cards and builds throwaway intermediate objects, and only the first match is kept.

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

Step 1 — Remove the translate dependency from the selector.

defaultExpensifyCardSelector passes translate through to getCardFeedsForDisplay, but in this code path (where allCardFeeds is {}), the only property set on the result is name: CONST.EXPENSIFY_CARD.BANK — translate is never called. We can refactor the selector to operate directly on allCards without translate, finding the first card where bank === CONST.EXPENSIFY_CARD.BANK && fundID exists, and returning a CardFeedForDisplay object for it. This short-circuits on first match instead of building the full map.

This eliminates the translate closure entirely, so the selector can be defined at module scope as a stable reference — no useCallback needed.

Step 2 — Update the call site in useSearchTypeMenuSections.ts.

With translate removed from the selector signature, the inline closure disappears. The stable module-level selector can be passed directly to useOnyx, giving it a referentially stable dependency that only triggers re-evaluation when the underlying Onyx data actually changes.

Step 3 — Update tests in tests/unit/selectors/CardTest.ts to reflect the updated selector signature (removing the translate parameter).

Expected impact: From ~13ms to <1ms per render. The dominant cost was the combination of re-running on every render (unstable reference) and iterating the full card list with unnecessary intermediate allocations (calling getCardFeedsForDisplay for a single first-match lookup). Both are eliminated.

What alternative solutions did you explore? (Optional)

1. Wrapping cardSelector with useCallback([translate]) in the call site — this stabilizes the reference and prevents per-render re-evaluation, but still leaves the inefficient full-iteration-for-first-match inside the selector. Since translate is stable from useLocalize, this alone would largely solve the problem, but the selector would remain unnecessarily expensive when it does run (e.g., on locale change or card data update).

2. Using createSelector / reselect — the codebase does not use external memoization libraries for selectors. Onyx's useOnyx handles memoization internally via deep equality on selector output. Adding reselect would be inconsistent with the existing architecture in src/selectors/.

[husamdaifalla01-cmyk]

Note on PR #82898 overlap: I'm aware of PR #82898 (NavigationTabBar refactor). Even if useSearchTypeMenuSections is removed from NavigationTabBar, the selector itself remains inefficient for all other consumers — the unstable reference and full-iteration-for-first-match problems persist wherever useSearchTypeMenuSections is called. The fix targets the selector at its source in Card.ts, not the call site.

[luacmartins]

@husamdaifalla01-cmyk nice! that seems like a good improvement. A couple of comments

defaultExpensifyCardSelector (in src/selectors/Card.ts) calls getCardFeedsForDisplay({}, allCards, translate). Since the first argument allCardFeeds is always {}, the entire first loop in getCardFeedsForDisplay (including getOriginalCompanyFeeds with its Object.fromEntries(Object.entries(...).filter(...))) is dead work.

The first loop never really runs in this selector since Object.entries(allCardFeeds ?? {}) would always return an empty array. We can remove that part for the hook. I'd recommending extracting this code into a reusable function and using that in the selector instead, as well in getCardFeedsForDisplay.

Additionally, could you run performance metrics to see how much this improves the selector speed and/or call sites?

[husamdaifalla01-cmyk]

@luacmartins Per your suggestion, I will extract the Expensify card loop into getExpensifyCardFeedsForDisplay in CardFeedUtils.ts, use it in the selector to replace getCardFeedsForDisplay({}, allCards, translate), and refactor getCardFeedsForDisplay to delegate to it for that path.

I will also run Reassure on the selector and call sites and include the comparison output in the PR description.

[mas7]

Proposal

Root Cause Analysis

defaultExpensifyCardSelector is called on every render of useSearchTypeMenuSections — one of the heavier hooks on the Reports/Search navigation path. The 13ms cost is not from the selector function body itself (which is two lines), but from the cascading computation it triggers unconditionally on every call. There are three distinct layered problems.

1. Inline cardSelector closure recreated every render, defeating useOnyx selector stability (~4-6ms)

Location: src/hooks/useSearchTypeMenuSections.ts, lines 50-52

The cardSelector callback passed to useOnyx is defined as a plain inline arrow function inside the component body. It gets a new object identity on every render. react-native-onyx uses the selector reference (and the dependencies array) to decide whether to re-run the selector. A new reference every render means the selector re-executes on every render, even when NON_PERSONAL_AND_WORKSPACE_CARD_LIST hasn't changed.

translate (from useLocalize) is stable across renders, so there's no legitimate reason to recreate cardSelector more than once per locale change.

Fix: Wrap cardSelector in useMemo with [translate] as the only dependency:

const cardSelector = useMemo(
    () => (allCards: OnyxEntry<NonPersonalAndWorkspaceCardListDerivedValue>) =>
        defaultExpensifyCardSelector(allCards, translate),
    [translate],
);

2. getCardFeedsForDisplay performs full O(n) traversal with no memoization (~5-7ms)

Location: src/libs/CardFeedUtils.ts → called from src/selectors/Card.ts

defaultExpensifyCardSelector calls getCardFeedsForDisplay({}, allCards, translate). The first argument is always an empty object {}, making the first loop a no-op. But the second loop still walks every card in allCards to detect Expensify Card bank entries, constructing intermediate objects for every distinct fund. For users with hundreds of workspace/personal cards, this is expensive.

Neither CardUtils.ts nor CardFeedUtils.ts use any memoization today (confirmed via code search — 0 hits for memoize in either file).

Fix (two parts):

(A) Pass undefined instead of {} for allCardFeeds and add an early-exit guard in getCardFeedsForDisplay to skip the first loop entirely when nullish.

(B) Memoize getCardFeedsForDisplay using the project's existing src/libs/memoize/index.ts utility with { equality: 'shallow', maxSize: 5 }. This is consistent with the project's patterns — the codebase already has 44 memoize usages and 0 createSelector/reselect usages.

3. Object.values(cards)?.at(0) allocates full array for first element (~1-2ms)

Location: src/selectors/Card.ts, last line of defaultExpensifyCardSelector

Object.values() allocates a new array containing every value from cards, then .at(0) discards all but the first. This runs inside the Onyx selector on every notification.

Fix: Replace with for...of early-return:

for (const value of Object.values(cards)) {
    return value;
}
return undefined;

Summary

Root Cause	File	Fix	Savings
Unstable selector closure	useSearchTypeMenuSections.ts:50-52	useMemo([translate])	~4-6ms
Unmemoized O(n) card traversal	CardFeedUtils.ts + Card.ts	memoize({shallow}) + null guard	~5-7ms
Full array allocation for .at(0)	Card.ts selector	for...of early return	~1-2ms

Total: ~13ms → <1ms for renders where card data hasn't changed. ~1-3ms for actual card-list updates. No new dependencies required — uses existing src/libs/memoize. Will validate with React Profiler before/after measurements.