-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Description
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
- Reduce re-renders 265 to 249 (-16), render time across all components from ~5,157ms to ~4,178ms (-19%)
- ManualOpenCreateExpense span reduced 479 ms->337 ms (-30%)
Draft PR -> Narrow React Compiler dependencies in MoneyRequestReportNavigation #82785
Issue Owner
Current Issue Owner: @bernhardojUpwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~022024854081531117550
- Upwork Job ID: 2024854081531117550
- Last Price Increase: 2026-02-20
Issue Owner
Current Issue Owner: @OlimpiaZurekMetadata
Metadata
Labels
Type
Projects
Status