Skip to content

[Due for payment 2026-03-04] [$250] Narrow React Compiler dependencies in MoneyRequestReportNavigation #83052

@mountiny

Description

@mountiny

Coming from a proposal here

Background:

When a user opens an Expense Report from Search results, the app renders MoneyRequestReportNavigation — the component responsible for prev/next navigation between reports. This component subscribes to 8 Onyx stores via useOnyx hooks. On every render, it calls getSections() + getSortedSections() — a chain that iterates all search result data, builds report action lookup maps, extracts violations, resolves transactions per report, runs policy/payment/approval checks per entry, then sorts everything. The component re-renders on every Onyx store update, including updates unrelated to the search data.

Problem:

When a user navigates from Search results to an Expense Report, every Onyx store update re-triggers the full getSections computation chain on all re-renders, even when the search data hasn't changed, blocking the JS thread with redundant work during navigation.

Solution:

Extract the specific sub-fields needed by getSections into separate variables before the computation block. This narrows the React Compiler's dependency tracking from whole objects to individual fields, so the cache only invalidates when the actual inputs change.
Expected Outcome:
flow:  create expense fab → add amount → add merchant → create expense → navigate to reports

Issue OwnerCurrent Issue Owner: @bernhardoj
Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~022024854081531117550
  • Upwork Job ID: 2024854081531117550
  • Last Price Increase: 2026-02-20
Issue OwnerCurrent Issue Owner: @OlimpiaZurek

Metadata

Metadata

Labels

Awaiting PaymentAuto-added when associated PR is deployed to productionDailyKSv2ExternalAdded to denote the issue can be worked on by a contributorTask

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions