Skip to content

perf: Migrate to Flashlist in MoneyRequestReportTransactionList#91422

Open
TMisiukiewicz wants to merge 104 commits into
Expensify:mainfrom
callstack-internal:perf/virtualised-report-list
Open

perf: Migrate to Flashlist in MoneyRequestReportTransactionList#91422
TMisiukiewicz wants to merge 104 commits into
Expensify:mainfrom
callstack-internal:perf/virtualised-report-list

Conversation

@TMisiukiewicz

@TMisiukiewicz TMisiukiewicz commented May 22, 2026

Copy link
Copy Markdown
Contributor

Explanation of Change

Problem
On heavy money-request reports the RHP list was effectively non-virtualised. The inner transactions section was rendered via plain .map() inside the parent FlatList's ListHeaderComponent, which renders eagerly. Every transaction row mounted synchronously when the report opened, pushing report open time to ~20–30s for a report with 1600 expenses and producing a noticeable jank window on every navigation.

Solution

  1. Unified list — merged the inner transactions section and the outer report-actions section into a single virtualised list. A discriminated-union UnifiedListItem (section-header | transaction | transactions-footer | report-action) flows through one renderItem dispatcher, so transactions and chat messages now share the same recycler window instead of one being eagerly rendered inside the other's header.

  2. FlashList — migrated the list from react-native's FlatList (FlatListWithScrollKey). initialScrollIndex replaces the FlatList-specific useFlatListScrollKey wrapper

  3. Controller + sub-componentMoneyRequestReportTransactionList continues to own the transaction-domain state (sort, group-by, selection, columns, totals, etc.) and exposes it to the parent via a render-prop controller. The parent renders a small MoneyRequestReportUnifiedList sub-component that assembles the FlashList from controller data plus the report-actions list

Fixed Issues

$ #91425
PROPOSAL:

Tests

Before testing: npm run i-standalone as this PR contains patch to the FlashList

  1. Go to Spend tab
  2. Go to Reports tab
  3. Open Report with a couple of expenses - where list is not scrollable
  4. Verify everything is displayed correctly
  5. Open Report with a lot of expenses in multiple categories
  6. Verify report opens correctly
  7. Select a single report and verify it selects correctly
  8. Select all reports from a category using category header and verify they are all selected (even if they are out of the viewport)
  9. Select all reports from all categories using top table header and verify all reports in a list get selected
  10. Send a message on the report and verify you are scrolled to the bottom of the list
  11. Web only: Narrow down the viewport horizontally and verify the table is scrollable horizontally
  12. Send a couple of messages on the chat
  13. Verify that messages are not scrolled horizontally together with the table
  • Verify that no errors appear in the JS console

Offline tests

N/A

QA Steps

Same as tests

  • Verify that no errors appear in the JS console

PR Author Checklist

  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I added steps for local testing in the Tests section
    • I added steps for the expected offline behavior in the Offline steps section
    • I added steps for Staging and/or Production testing in the QA steps section
    • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
    • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
  • I included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • Android: Native
    • Android: mWeb Chrome
    • iOS: Native
    • iOS: mWeb Safari
    • MacOS: Chrome / Safari
  • I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
  • I followed proper code patterns (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
    • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
    • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I followed the guidelines as stated in the Review Guidelines
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
  • I verified that if a function's arguments changed that all usages have also been updated correctly
  • If any new file was added I verified that:
    • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
  • If a new CSS style is added I verified that:
    • A similar style doesn't already exist
    • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
  • If new assets were added or existing ones were modified, I verified that:
    • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
    • The assets load correctly across all supported platforms.
  • If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
  • If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
  • If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
  • If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
    • I verified that all the inputs inside a form are aligned with each other.
    • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
  • If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
  • I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow.
  • If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native
Android: mWeb Chrome
iOS: Native
ios.mov
iOS: mWeb Safari
MacOS: Chrome / Safari
web.mov

@codecov

codecov Bot commented May 22, 2026

Copy link
Copy Markdown

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines Coverage Δ
src/CONST/index.ts 94.81% <ø> (ø)
...ansactionItemRow/DeferredTransactionItemRowRBR.tsx 100.00% <100.00%> (ø)
...ents/TransactionItemRow/TransactionItemRowWide.tsx 99.13% <100.00%> (+<0.01%) ⬆️
src/components/TransactionItemRow/index.tsx 83.60% <100.00%> (+0.55%) ⬆️
src/hooks/useReportActionsScroll.ts 98.23% <100.00%> (ø)
src/hooks/useScrollToEndOnNewMessageReceived.ts 94.11% <100.00%> (ø)
src/styles/variables.ts 100.00% <ø> (ø)
...ts/TransactionItemRow/TransactionItemRowNarrow.tsx 0.00% <0.00%> (ø)
...stReportView/MoneyRequestReportTransactionItem.tsx 0.00% <0.00%> (ø)
...ew/MoneyRequestReportTransactionLongPressModal.tsx 0.00% <0.00%> (ø)
... and 4 more
... and 9 files with indirect coverage changes

@TMisiukiewicz TMisiukiewicz changed the title perf: virtualise transaction list in report screen perf: Migrate to Flashlist in MoneyRequestReportTransactionList May 26, 2026
@TMisiukiewicz
TMisiukiewicz marked this pull request as ready for review May 26, 2026 07:20
@TMisiukiewicz
TMisiukiewicz requested review from a team as code owners May 26, 2026 07:20
@melvin-bot
melvin-bot Bot requested review from aimane-chnaif and joekaufmanexpensify and removed request for a team and joekaufmanexpensify May 26, 2026 07:20
@melvin-bot

melvin-bot Bot commented May 26, 2026

Copy link
Copy Markdown

@aimane-chnaif Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

Comment thread src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx Outdated
Comment thread src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6b5c9bef51

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx Outdated
@TMisiukiewicz

Copy link
Copy Markdown
Contributor Author

C1. LayoutManager is not initialized swallow is string-matched

fixed in 970d609

C2. Nested FlashList viewportHeight starts at 0 on first paint

fixed in 335748a

C3. scrollOffsetStore not reset when isHorizontalTable transitions on the same report

fixed in 335748a

C4. Deep-link (initialScrollIndex) into a transaction row is silently unsupported

Nothing in the codebase ever writes a transactionID into that param. I don't think we should write code for a flow that does not exist

C5. Nested FlashList shares the getItemType bug

not valid

C6. Neither the outer nor the nested FlashList sets extraData

I don't think we have any bug introduced by lack of extraData so I am not in favor of adding this unless necessary

C7. handleScroll / handleLayout / dispatchRenderItem / nested renderItem are all inline closures

React Compiler handles this

C8. MoneyRequestReportFlashList shim is now dead code

not valid

I'll check the resize and send message bugs soon

@TMisiukiewicz

Copy link
Copy Markdown
Contributor Author

@aimane-chnaif I can't reproduce the resize bug - can you verify again? Might be accidentally fixed by one of my recent commits 😅

@github-actions

Copy link
Copy Markdown
Contributor

🚧 mountiny has triggered a test Expensify/App build. You can view the workflow run here.

@TMisiukiewicz

Copy link
Copy Markdown
Contributor Author

also couldn't reproduce the issue with the scroll after msg

@github-actions

This comment has been minimized.

@aimane-chnaif

Copy link
Copy Markdown
Contributor

After resize window, blank screen briefly appears. (00:04s)

Screenshot 2026-07-10 at 3 46 57 pm

Also when scroll fast (00:42s)

Screenshot 2026-07-10 at 3 47 13 pm
Screen.Recording.2026-07-10.at.3.45.00.pm.mov

@TMisiukiewicz

Copy link
Copy Markdown
Contributor Author

@aimane-chnaif narrow and wide are two structurally different lists (main scroll list vs separate horizontally-scrollable table). Swapping between them means one unmounts and the other mounts fresh, causing a single frame blank while the new list measures itself. It only happens right at breakpoint and normal usage almost never hit it - I'd say it's normal React behavior, wdyt?

Regarding blank spaces in list items on scroll, I was able to reproduce it for a very short time, but it's not something clearly reproducible, here's the vid:

Screen.Recording.2026-07-14.at.06.34.52.mov

Additionally, I was able to reproduce it with scrolling search page too, so I think it might be general thing when scrolling really fast with heavy list items in FlashList. Possibly a thing for a separate issue.

WDYT about moving forward with the PR as-is?

@aimane-chnaif

Copy link
Copy Markdown
Contributor

Additionally, I was able to reproduce it with scrolling search page too, so I think it might be general thing when scrolling really fast with heavy list items in FlashList. Possibly a thing for a separate issue.

Agree. The root cause exists in production so not blocker for this PR. Definitely out of scope.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b2cb8c0f25

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx Outdated
Comment thread src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx Outdated
@MelvinBot

Copy link
Copy Markdown
Contributor

🤖 Review — I read the FlashList migration, the unified-list mechanics, selection/scroll behavior, the two flash-list patches, and swept the codebase for dangling references to the removed FlatList code.

Overall this looks solid. The core migration is well done: getItemType is present (returns item.type, so recycling buckets are separated correctly across the union), initialScrollIndex bounds are safe, the renderItem dispatcher handles every UnifiedListItem variant, and no dead references to the removed FlatListWithScrollKey / useFlatListScrollKey / getInitialPaginationSize symbols were left anywhere in the repo — all call sites are updated in this PR. Selection operates on the full data arrays (not mounted cells), so "select all in category / all categories" works for out-of-viewport rows, and horizontal-scroll isolation is correctly architected (chat actions are never nested inside the horizontal ScrollView).

One thing worth a look before merge, plus some minor cleanups:

Worth addressing

onStartReached fires on mount → spurious GetOlderActions fetch. In MoneyRequestReportUnifiedList.tsx onStartReached is wired directly with no onStartReachedThreshold. On a normal report open the list mounts at the very top (now the transactions section), so FlashList fires onStartReached immediately, calling loadOlderChats() in MoneyRequestReportActionsList.tsx. The deleted BaseFlatListWithScrollKey deliberately gated start-reached behind real user interaction (hasUserInteractedRef); that gate is gone. loadOlderChats is guarded by hasOlderActions so it's a no-op for short reports, but for any report with older history this issues a fetch on every open before the user has scrolled — and while they're looking at transactions, not chat. Suggest restoring an interaction/scroll gate (only allow onStartReached after the first scroll) or gating on "have we reached the actions region yet."

Minor / cleanup

Five low-severity items
  • keyExtractor mixes ID namespaces without prefixing — transaction rows key on transaction.transactionID and report-action rows on action.reportActionID, both unprefixed, while section headers (group-…) and the footer (transactions-footer) are namespaced. Both IDs come from the same rand64() space, so a duplicate key would silently drop/mis-render a row. Collision is astronomically unlikely, but prefixing (txn-… / action-…) is free and fully removes the risk. Same function's default branch returns '' — if a new item type is ever added and the case is forgotten, items collapse to one colliding key silently; prefer throwing.

  • details.md leaves traceability fields as TBD for both new patches (Upstream PR/issue, E/App issue, PR introducing patch). The existing patch entries fill these in — worth populating before merge, especially for the large/intricate 015+mvcp-header-aware patch (358 lines of offset-correction math).

  • Stale eslint.seatbelt.tsv reference (post-merge lint risk) — on main this file has a line pointing at the now-deleted src/components/FlatList/hooks/useFlatListScrollKey.ts. It's not in this PR's changeset, so after merging main the stale entry may resurface and fail the seatbelt lint. Consider removing that line here.

  • Unexplained magic numbersdrawDistance={1000} in MoneyRequestReportUnifiedList.tsx and the * 12 multiplier in ExternalScrollFlashListTable.tsx. A named const or short comment would help.

  • data / controller identity churns every renderdata/reportActionItems and the controller object literal are rebuilt each render, so memoization of data/renderItem can't hold across renders. FlashList tolerates this (diffs by key), so it's not a correctness bug, but memoizing on stable inputs would better serve the PR's perf goal.

Checked and clean
  • Selection (test steps 7–9): top "select all" maps over transactionsWithoutPendingDelete (full prop), and category "select all" toggles group.transactions from the full groupedTransactions — off-viewport rows included. Toggle callbacks list selectedTransactionIDs in their deps (no stale selection).
  • Horizontal isolation (steps 11–13): in table mode the vertical list's data is report-actions only; the table is the sole component inside a horizontal ScrollView. Chat can't drift sideways.
  • Auto-scroll to bottom (step 10): the switch from scrollToEnd (estimated offset → blank landing) to indexed scrollToIndex(lastDataIndex) is the correct FlashList fix; lastDataIndex correctly points at the last report action (or the totals footer in transactions-only mode). One latent stale-visibleReportActions closure exists in the Pusher subscription (deps [report?.reportID]), but it's masked by the enableScrollToEnd fallback and is pre-existing, not a regression from this PR.
  • getItemType / recycling: present and correct; estimatedItemSize intentionally omitted is correct for FlashList 2.3.0 (auto-measured).
  • TransactionItemRow refactor: new shouldSkipDeferRBR / shouldDeferRBR props are threaded consistently through Narrow/Wide/Deferred variants; Wide correctly Omits shouldSkipDeferRBR from spread props. No prop/type mismatch.
  • Dead code: no dangling imports of any removed symbol anywhere in the repo; shared helpers (RenderTaskQueue, useFlatListHandle) are still used by the base FlatList and left in place correctly.

None of the above is a hard blocker; the onStartReached-on-mount behavior is the one I'd verify against a report with paginated chat history before merging. Reply with @MelvinBot <feedback> to refine.

@aimane-chnaif

Copy link
Copy Markdown
Contributor

Please check AI review comments

@MelvinBot

Copy link
Copy Markdown
Contributor

🤖 Regression hunt — I compared each changed file at head (b2cb8c0) against its main version to find behavior that worked under the old FlatList and changes under the unified FlashList. Focused on chat/report-actions, the transactions table, and FlatList→FlashList API parity.

Verdict: no confirmed data-loss/crash regressions. Two confirmed behavior changes worth fixing, one high-blast-radius patch to QA, and a few suspected items needing a runtime check. Core transaction behaviors (sort, group, totals, selection, long-press, RBR) are preserved — details at the bottom.

Confirmed — worth addressing

1. Pagination thresholds silently dropped (0.75 → FlashList's ~0.5 default). [MEDIUM] The unified list wires onStartReached/onEndReached but omits onStartReachedThreshold/onEndReachedThreshold in MoneyRequestReportUnifiedList.tsx. The old MoneyRequestReport FlatList used 0.75 for both, and the sibling main chat list ReportActionsList.tsx still explicitly sets 0.75. Net effect: older/newer pages start loading ~25% closer to the edge, so a fast scroll can hit a momentary "waiting to load" gap the 0.75 value was chosen to avoid. Cheap fix: re-add both thresholds.

2. getItemType collapses every report action into one bucket. [MEDIUM, perf] The unified list's getItemType returns the coarse item.type — so all report actions return the single constant 'report-action', regardless of actionName. The established main chat list uses getItemType={(item) => item.actionName} precisely so FlashList only recycles rows of the same action shape. Here, tall rows (report/IOU/task previews) recycle into short rows (CREATED, plain comments), defeating the per-type recycle pool and causing extra measurement/layout churn. Since this is a perf PR, worth aligning with the chat-list convention.

High blast radius — needs manual QA

3. Patch 015+mvcp-header-aware is a global node_modules patch. [HIGH blast radius / SUSPECTED regression] It rewrites @shopify/flash-list's maintainVisibleContentPosition offset-correction math, so it affects every FlashList in the app with MVCP enabled — not just this screen. The only other live MVCP consumer is the main report chat (InvertedFlashList in ReportActionsList.tsx), which is the app's most scroll-position-sensitive surface (chat scroll-jump is a recurring bug class). The authors did guard the inverted path (forces firstItemOffset = 0), so it should be neutral there — but this needs an explicit regression pass on the main chat (new-message prepend, scroll-to-bottom, deep-link anchoring) on web and Android, not only the new report view.

Suspected — verify at runtime

Four items to confirm on device/browser
  • iOS short-report bottom gap [MEDIUM] — the deleted FlatListWithScrollKey/index.ios.tsx had iOS-only logic: when content is shorter than the list, requestAnimationFrame(() => scrollToEnd()) to avoid a bottom gap (header renders after data). The unified list has no equivalent. A report shorter than the viewport may not settle at the bottom on iOS the way it did. Likely cosmetic, but it was deliberately ported before and is now gone.
  • "Latest messages" pill may not mark as read [MEDIUM] — old scrollToBottomAndMarkReportAsRead called readNewestAction synchronously; the new scrollToLatestMessages defers the read until onTrackScrolling observes the bottom crossing ACTION_VISIBLE_THRESHOLD. The 2000ms stick-to-bottom safety net only re-scrolls, it doesn't complete the pending read — so if the indexed jump settles without emitting a qualifying scroll event, the report could stay unread. Verify the pill marks the report read.
  • Wide-table column alignment [MEDIUM] — with patch 014, vertical-list item width derives from the measured header width, not an explicit contentWidth. If the header ever measures narrower than the row content width, recycled rows inherit the narrower width and columns drift out of alignment. Column sizes are computed once in the parent and shared, so this is only a total-width edge case — check a table wider than the viewport.
  • lastItemIndexRef seeded to 0 [LOW] — a scroll-to-bottom firing before the onLastItemIndexChange effect runs would scrollToIndex(0) (jump to top). The window is tiny (effect runs on first render) but a message arriving mid-mount could briefly target index 0.

Correction to my earlier review

The "onStartReached fires on mount" point I raised in my first review is not a functional regression on closer inspection: loadOlderChats is independently gated by hasOlderActions/oldestReportAction and getOlderActions de-dups, so a mount-time fire is a no-op when nothing older exists — worst case one extra prefetch, not a fetch storm. Severity downgrade from "worth addressing" to LOW.

Verified preserved — NOT regressions
  • Sorting & grouping — the sort/group/RBR/selection-state logic is byte-identical to main; only presentation changed (nested .map() → flat typed array). Re-sort/re-group rebuilds the whole data array.
  • Totals / "add expense" footer — rendered exactly once in both inline and horizontal-table modes; no double-render or missing-footer path.
  • Selection — top and category "select all" operate on the full data arrays, so out-of-viewport rows are included (test steps 7–9 safe).
  • Long-press modal — moved to a single sibling component with an imperative show(transactionID) handle; takes the ID by value, so recycled/off-screen rows work.
  • RBR indicators — RBR was already deferred on main; the new shouldSkipDeferRBR makes these rows render RBR eagerly (sooner), which is the intended recycling-safety fix. No row that showed an RBR before is now delayed/missing.
  • Chat row recyclingReportActionItem already resets hidden/context-menu/emoji/reaction state on action change and uses Onyx-keyed draft for inline edit, so no state bleed across recycled cells (it survives recycling in the main chat list too).
  • Imperative scroll parity — FlashList's ref exposes scrollToIndex/scrollToOffset/scrollToEnd/etc.; no caller invokes a missing method.
  • onViewableItemsChanged offsetonViewableItemsChangedAdjusted subtracts reportActionIndexOffset before forwarding, keeping unread-marker/read-receipt indices apples-to-apples.
  • Empty/single/not-scrollable reports — the list sits in a bounded flex1 container (can't collapse to zero); genuinely empty reports use a separate ScrollView branch.
  • Horizontal-scroll isolation — chat actions are never nested inside the table's horizontal ScrollView (test steps 11–13 safe).
  • Patch 014+external-window-size — only consumed by the new table; byte-identical to upstream when unset, so nil blast radius elsewhere.

The two cheap wins are re-adding the pagination thresholds (#1) and the per-actionName getItemType (#2). The one item I'd insist on manual QA for is #3 (global MVCP patch vs the main chat list). Reply with @MelvinBot <feedback> to dig into any of these.

@MelvinBot

Copy link
Copy Markdown
Contributor

🤖 Regression hunt — I compared the PR head against main behavior-by-behavior (pagination, scroll, selection, unread markers, deep-links, the flash-list patches), focusing only on things that worked before and could change now, not general nits.

Bottom line: the core money-request behaviors are preserved (selection operates on full data, totals footer, sort/group, unread-marker index tracking is correctly compensated, and the RBR change is a deliberate fix). The regression risk is concentrated on the chat / report-actions side and the patched flash-list scroll math. Five concrete candidates, none confirmed a hard blocker but the first three are worth verifying at runtime.

Regression candidates

1. [medium] onStartReached fires on mount → eager GetOlderActions on every cold open. Old BaseFlatListWithScrollKey gated start-reached behind real user interaction (hasUserInteractedRef). That gate is gone — the list mounts at the top (transactions), FlashList's bound-check runs after first layout, and loadOlderChats() fires immediately. Guarded by hasOlderActions, so it no-ops on short reports, but any report with chat history now issues a pagination fetch before the user scrolls. (Same item from my earlier review — reconfirmed here as a genuine before/after behavior change.)

2. [medium] extraData={draftReportActionID} dropped from the report-actions list. The old FlatList passed extraData={draftReportActionID} so already-mounted action rows re-rendered when the Concierge draft changed, driving shouldDisableContextMenuForConciergeDraft. The unified MoneyRequestReportUnifiedList FlashList has no extraData. It's partially mitigated because renderReportAction's useCallback deps include draftReportActionID (identity change re-renders visible cells), but with recycling this is less reliable than extraData. Risk: context-menu enable/disable on the Concierge-draft row can go stale.

3. [medium] Horizontal table scroll position no longer restored across data changes. main's MoneyRequestReportTransactionList kept a horizontalScrollOffsetRef and re-applied it via useLayoutEffect on [sortedTransactions, …], preserving horizontal position when a transaction was added / list re-sorted. The new ExternalScrollFlashListTable wraps the table in a bare horizontal ScrollView with no ref/onScroll/restore. It may persist naturally if the ScrollView isn't remounted, but that's the removed behavior with no explicit replacement — worth confirming horizontal position survives adding an expense / re-sorting on a wide table.

4. [medium] Deep-link scroll can miss on a large report. initialScrollIndex is computed as linkedActionLocalIndex + reportActionIndexOffset and re-anchored imperatively once (hasAnchoredLinkedActionRef). Transactions and report-actions load on independent streams, so if the one-shot anchor fires before the transaction rows finish arriving, reportActionIndexOffset grows afterward but never re-fires — landing off-target. There's no onScrollToIndexFailed-style fallback (FlashList has no equivalent). The linked-action highlight still applies, so it's a scroll-position miss, not a broken highlight.

5. [low] Pagination thresholds changed. Old FlatList set onStartReachedThreshold/onEndReachedThreshold to 0.75; the new FlashList passes neither, so it uses defaults (~0.2 start / 0.5 end) — older/newer actions page in closer to the edge, and it's inconsistent with the sibling ReportActionsList which sets 0.75 on its FlashList. Minor UX timing change.

Patch risk (load-bearing)

The 015+mvcp-header-aware patch is a private fork of flash-list's maintainVisibleContentPosition math (Upstream PR/issue: TBD, unreviewed). It applies the full diff on the ScrollAnchor path but only layoutDiff on the scrollTo fallback (web / Android-inverted), on the assumption that getAbsoluteLastScrollOffset() already reflects firstItemOffset. If that assumption is off on any platform, the viewport can drift while a large header/table settles its height — exactly this list's scenario (a ~400px header over a long table). Recommend exercising deep-link-into-chat-below-a-large-table on web, iOS, and Android specifically.

Checked and confirmed NOT regressed
  • Selection (single / category select-all / top select-all, incl. off-viewport rows): derived from SearchContext.selectedTransactionIDs + full groupedTransactions, never from mounted cells. Persists across sort/scroll/recycle.
  • Totals / Add-Expense footer: renders exactly once — as the transactions-footer data item in inline mode, and inside ListHeaderComponent (outside the horizontal scroller) in table mode. No double-render; empty-state path preserved.
  • Unread / new-message marker + mark-as-read: onViewableItemsChangedAdjusted shifts indices by reportActionIndexOffset so the 0-based visibleReportActions index still matches; transaction/footer rows map to negative indices which the Math.max-based tracker ignores. No off-by-one, no false mark-as-read.
  • Scroll-to-bottom on send (step 10): scrollToEnd → indexed scrollToIndex(lastDataIndex) lands at the same visual bottom and avoids the estimated-offset blank landing. No staleness race (guarded + deferred).
  • RBR (violation) deferral: new shouldSkipDeferRBR makes money-request rows render RBR immediately (avoids red-dot flicker on recycle); all other TransactionItemRow callers keep shouldDefer=true. A fix, not a regression.
  • Blast radius: migration is scoped to the money-request report view only. The deleted FlatListWithScrollKey/useFlatListScrollKey/getInitialPaginationSize had no other consumers; the shared chat ReportActionsList already used InvertedFlashList. AUTOSCROLL_TO_TOP_THRESHOLD moved to CONST with an identical value (250).
  • keyboardShouldPersistTaps preserved; removeClippedSubviews/initialNumToRender are FlatList-only and correctly not carried over.
  • Sorting/grouping, column header stickiness, long-press modal, empty/short report: preserved.
  • One low-confidence visual note: narrow-layout rounded corners moved from a single list wrapper to per-row wrappers (position.isFirst/isLast) — corners compute correctly but the background/separator restructuring is worth a quick visual check on mWeb/native.

Top three to smoke-test: (1) cold-open a report with older chat history — watch for an early fetch/jump; (2) deep-link into a chat message on a report with many slow-loading transactions — confirm it lands on the message; (3) horizontal-scroll a wide table, then add/re-sort — confirm position holds. Reply with @MelvinBot <feedback> to refine.

@TMisiukiewicz
TMisiukiewicz requested a review from a team as a code owner July 15, 2026 12:11
@TMisiukiewicz
TMisiukiewicz force-pushed the perf/virtualised-report-list branch from 5c17a83 to a71286a Compare July 15, 2026 12:40
@TMisiukiewicz

Copy link
Copy Markdown
Contributor Author

@aimane-chnaif addressed all valid comments 🙏

@TMisiukiewicz

Copy link
Copy Markdown
Contributor Author

@aimane-chnaif resolved conflicts, ready for final review

@github-actions

Copy link
Copy Markdown
Contributor

🚧 mountiny has triggered a test Expensify/App build. You can view the workflow run here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants