Decompose ReportActionsList

[rlinoz]

Decomposing ReportActionList seems to improve re-rendering time and performs way less commits #87506

This issue tracks the split of the linked PR into multiple ones.

Issue Owner

Current Issue Owner: @adhorodyski

[adhorodyski]

Split plan — decompose/report-actions-list → PR series

Dependency graph

PR 1  Extract presentation (header + previous-messages button)
  ↓
PR 2  Extract data hooks (useTransactionThread + useReportActionsPagination)
  ↓
PR 3  Extract useReportActionsVisibility
  ↓
PR 4  Extract marker hooks (useUnreadMarker + useMarkAsRead)
  ↓
PR 5  Extract useReportActionsScroll
  ↓
PR 6  Replace ReportActionsView with ReportActions orchestrator
  ↓
PR 7  Drop FlashList hidden-render workaround
  ↓
PR 8  Inverted-wheel handler for InvertedFlashList
  ↓
PR 9  Scope VISIBLE_REPORT_ACTIONS selector per report
  ↓
PR 10 Compiler-clean pipeline hooks
  ↓
PR 11 Simplify unread marker suppression rule
  ↓
PR 12 Flip list-ref ownership on ActionListContext

Deferred / rejected splits

• Router shim as a standalone PR. Originally planned as PR 1. Rejected: introducing a router before its data layer is reusable would force either heavy duplication against MRR's subscriptions or a speculative shared selector hook. Router lands in PR 6 as part of the orchestrator replacement, after hooks exist.
• MRR migration to shared router. Out of scope for this series. See memory: project_report_actions_list_unification.md.

---

PR 1 — Extract presentation components

Goal. Pull ReportActionsListHeader and ShowPreviousMessagesButton out of the 915-LOC monolith at src/pages/inbox/report/ReportActionsList.tsx. Components own their own rendering gates (CLEAN-REACT-PATTERNS-2). Call-site behavior gates stay in place — the monolith gets smaller, nothing changes user-visible.

Files.

New:

• src/pages/inbox/report/ShowPreviousMessagesButton.tsx
  • Props: reportAction, hasPreviousMessages, showFullHistory, onPress
  • Internal gates: returns null when actionName !== CREATED, !hasPreviousMessages, or showFullHistory
  • Renders the button + divider-line presentation when gates pass
• src/pages/inbox/report/ReportActionsListHeader.tsx
  • Props: reportID: string, onRetry: () => void
  • Self-subscribes: report via Onyx, conciergeReportID, isInSidePanel
  • Computes isConciergeSidePanel internally
  • Gates ConciergeThinkingMessage on isConciergeSidePanel; always renders ListBoundaryLoader

Modified:

• src/pages/inbox/report/ReportActionsList.tsx
  • In renderItem: replace inline button JSX with <ShowPreviousMessagesButton .../> wrapped by the existing isConciergeSidePanel && gate (preserved; removal belongs with later concierge cleanup).
  • In listHeaderComponent: replace inline fragment with <ReportActionsListHeader reportID={report.reportID} onRetry={retryLoadNewerChatsError} />. Keep the canShowHeader gate + hasHeaderRendered ref unchanged (removal belongs with PR 10 compiler cleanup).
  • Drop imports now unused locally: ConciergeThinkingMessage, ListBoundaryLoader, and any icon/button imports used only by the extracted JSX.

Tests.

• tests/unit/ShowPreviousMessagesButtonTest.tsx — renders when all gates pass; returns null per each failing gate; fires onPress.
• tests/unit/ReportActionsListHeaderTest.tsx — renders ListBoundaryLoader unconditionally; renders ConciergeThinkingMessage only when in concierge side panel; forwards onRetry.

Verification.

npx prettier --write <changed files>
npx eslint <changed files> --max-warnings=0
npm run typecheck-tsgo
npm run react-compiler-compliance-check check-changed
npx jest tests/unit/ShowPreviousMessagesButtonTest.tsx tests/unit/ReportActionsListHeaderTest.tsx tests/ui/ReportActionsViewTest.tsx

Risk. Low. Pure code movement with call-site behavior gates preserved.

PR 2 — Extract data hooks

Goal. Pull useTransactionThread + useReportActionsPagination out of the monolith. Pagination consumes transaction-thread output; coupled, ship together.

Files.

• New: src/hooks/useTransactionThread.ts
• New: src/hooks/useReportActionsPagination.ts
• Modified: src/pages/inbox/report/ReportActionsList.tsx (delegate to hooks)
• Modified: src/pages/inbox/report/ReportActionsView.tsx (drop now-duplicate computations; monolith shrinks)
• Modified: src/hooks/useLoadReportActions.ts (new imperative surface)
• Touched: src/hooks/useTransactionsAndViolationsForReport.ts (expose isLoaded)

Tests. tests/unit/useTransactionThreadTest.tsx, tests/unit/useReportActionsPaginationTest.tsx. Update tests/unit/useLoadReportActionsTest.tsx for the new signature.

Risk. Medium. Touches pagination — high-traffic path. QA deep-links + older/newer loads.

PR 3 — Extract useReportActionsVisibility

Goal. Pull session / concierge filtering + "show full history" toggle out of the monolith.

Files.

• New: src/hooks/useReportActionsVisibility.ts
• Modified: src/pages/inbox/report/ReportActionsList.tsx

Tests. tests/unit/useReportActionsVisibilityTest.tsx — concierge filtering, "show full history" toggle, archived/non-archived variants.

Risk. Low-medium. Concierge session filter is behaviour-sensitive — QA concierge side panel.

PR 4 — Extract unread marker hooks

Goal. Pull useUnreadMarker (marker position + read-event subscription) and useMarkAsRead (report-change + visibility-change triggers) out of the monolith. Coupled via unreadMarkerTime state; ship together.

Files.

• New: src/hooks/useUnreadMarker.ts
• New: src/hooks/useMarkAsRead.ts
• Modified: src/pages/inbox/report/ReportActionsList.tsx
• Touched: src/pages/inbox/report/shouldDisplayNewMarkerOnReportAction.ts (if signature changes)

Tests. tests/unit/useUnreadMarkerTest.tsx, tests/unit/useMarkAsReadTest.tsx.

Risk. Medium. Marker behavior is visible; QA mark-as-read on open / scroll / focus.

PR 5 — Extract useReportActionsScroll

Goal. Pull scroll state + Pusher new-action handler + scroll imperatives out of the monolith. Biggest hook, most entangled; last in the extraction series. At this point the monolith is a shell consuming five hooks.

Files.

• New: src/hooks/useReportActionsScroll.ts
• Modified: src/pages/inbox/report/ReportActionsList.tsx (now a thin body)

Tests. tests/unit/useReportActionsScrollTest.tsx — Pusher handler firing, scroll imperative API, IOU-error effect.

Risk. Medium. Pusher callback + scroll anchor are sensitive. QA incoming messages + scroll-to-newest.

PR 6 — Replace ReportActionsView with ReportActions orchestrator

Goal. Introduce src/pages/inbox/ReportActions.tsx — the orchestrator that owns skeleton branching, money-request-vs-chat decision for non-MRR entry points, and UserTypingEventListener mount. Swap consumers to mount <ReportActions> in place of <ReportActionsView>. Delete ReportActionsView.tsx. Rewrite UI + perf tests against the new surface.

Why here. By this point the hooks exist, so the orchestrator subscribes to the same data sources the children use — no speculative duplication. ReportActionsView's responsibilities split cleanly: skeleton/branch → ReportActions; list body → ReportActionsList (already hook-driven).

Note. MRR branching stays put — the blueprint does not migrate MRR to use ReportActions. Unification of the two list surfaces is out of scope for this series.

Files.

• New: src/pages/inbox/ReportActions.tsx
• Rewritten/deleted: src/pages/inbox/report/ReportActionsView.tsx — deleted.
• Deleted: src/pages/inbox/report/getReportActionsListInitialNumToRender.ts (obsolete — FlashList has no maxToRenderPerBatch)
• Deleted: tests/unit/getReportActionsListInitialNumToRenderTest.ts
• Modified: src/pages/inbox/ReportActionsList.tsx (the 56-LOC wrapper) or direct consumers — point at ReportActions
• Touched: src/libs/ReportActionsUtils.ts, src/libs/actions/Report/index.ts, src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx (signature follow-through)

Tests.

• Rewrite tests/ui/ReportActionsViewTest.tsx → tests/ui/ReportActionsTest.tsx. Same assertions against the new orchestrator.
• Rewrite tests/perf-test/ReportActionsList.perf-test.tsx against the current list surface.

Risk. Medium. Surgery happens here but the hooks already absorbed most of the risky logic in PRs 2–5.

PR 7 — Drop FlashList hidden-render workaround

Goal. Replace StaticReportActionsPreview hidden-render + 200ms reveal timer with maintainVisibleContentPosition.startRenderingFromBottom. Declarative mount-at-top for transaction thread / money request reports.

Files.

• Modified: src/pages/inbox/report/ReportActionsList.tsx (drop hide-render branch, declarative MVCP)
• Modified: src/hooks/useReportActionsScroll.ts (drop LIST_SCROLLING_DEBOUNCE_TIME logic)
• Modified: src/hooks/useTransactionThread.ts (canPerformWriteAction type fix if needed)
• Deleted: src/pages/inbox/report/StaticReportActionsPreview/{index.tsx, index.native.tsx, types.ts}

Tests. Extend tests/ui/ReportActionsTest.tsx — assert maintainVisibleContentPosition is passed with startRenderingFromBottom: true only for reports that mount at top and have no linkedReportActionID.

Risk. Medium-high. QA first paint + deep-link + chat swap on web + native.

PR 8 — Inverted-wheel handler for InvertedFlashList

Goal. Port RN-Web's invertedWheelEventHandler patch into InvertedFlashList. Without it, wheel scroll feels reversed on every inverted list on web.

Files.

• New: src/components/FlashList/InvertedFlashList/useInvertedWheelHandler.ts (native no-op)
• New: src/components/FlashList/InvertedFlashList/useInvertedWheelHandler.web.ts
• Modified: src/components/FlashList/InvertedFlashList/index.tsx
• Modified: src/components/FlashList/index.tsx

Tests. tests/unit/InvertedFlashListWheelHandlerTest.tsx — web variant: onWheel invokes handler that inverts deltaY; native variant: no-op.

Risk. Low-medium. QA web wheel across inverted surfaces.

PR 9 — Scope VISIBLE_REPORT_ACTIONS selector per report

Goal. Hook currently subscribes to the whole derived collection; scope it via a module-level selector factory keyed on reportID. Kills LHN + tooltip render cascade.

Files.

• Modified: src/hooks/useReportActionsVisibility.ts

Tests. tests/unit/selectVisibleReportActionsTest.ts — writes to report B do not notify subscribers of report A.

Profiler delta. Run before/after (5 trials each). Expect OptionRowLHN, Tooltip, ActiveHoverable, GenericTooltip render counts to drop.

Risk. Low. Pure perf fix.

PR 10 — Compiler-clean pipeline hooks

Goal. Drop every react-hooks/* eslint-disable across pipeline hooks. Convert useEffect/useLayoutEffect legacy patterns to useEffectEvent or render-time state adjustment. Drop dead returns + redundant identity guards. Also removes the canShowHeader + hasHeaderRendered gate from PR 1 once it's safe to always-render the header (ListBoundaryLoader self-renders null outside error/loading).

Files.

• src/hooks/useMarkAsRead.ts
• src/hooks/useUnreadMarker.ts
• src/hooks/useReportActionsScroll.ts
• src/hooks/useReportActionsPagination.ts
• src/hooks/useTransactionThread.ts
• src/pages/inbox/report/ReportActionsList.tsx (drop canShowHeader gate and hasHeaderRendered ref; call-site simplification)

Tests. Existing hook tests stay green. Compiler gate (check-compiler.sh) is the primary pass condition.

Risk. Low. Tooling-only change; behaviour-preserving.

PR 11 — Simplify unread marker suppression rule

Goal. Drop prevUnreadMarkerReportActionID self-referential ref. Suppression rule becomes consistent; narrow-edge-case bug fixed (marker no longer lands on user's own just-sent message).

Files.

• Modified: src/hooks/useUnreadMarker.ts
• Modified: src/pages/inbox/report/shouldDisplayNewMarkerOnReportAction.ts (inline comment documenting the behavior change)
• Modified: src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx (drop pass-through)

Tests.

• tests/unit/ReportActionsUtilsTest.ts — add explicit test for the new rule: chat with unreads, user reads, user sends own message → marker clears entirely, does NOT land on own message.
• Extend tests/unit/useUnreadMarkerTest.tsx — marker suppression consistent across initial mount + subsequent updates.

Risk. Low-medium. User-visible change; document in PR body + flag for QA.

PR 12 — Flip list-ref ownership on ActionListContext

Goal. Remove the last React Compiler bail in ReportActionsList. ActionListContext stops exposing a RefObject; exposes registerListRef(ref) + getListRef() callbacks. Each list owns its useRef locally.

Files.

• Modified: src/pages/inbox/ReportScreenContext.ts
• Modified: src/hooks/useActionListContextValue.ts
• Modified: src/hooks/useReportScrollManager/{index.ts, index.native.ts, types.ts}
• Modified: src/pages/inbox/report/ReportActionsList.tsx
• Modified: src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
• Modified: src/pages/inbox/report/ReportActionItemMessageEdit.tsx

Tests.

• tests/unit/useActionListContextValueTest.tsx — lifecycle: register → read → unmount → getter returns null.
• tests/unit/useReportScrollManagerTest.tsx — imperatives resolve ref at call time, not init.

Verification.

./.claude/scripts/check-compiler.sh src/pages/inbox/report/ReportActionsList.tsx   # must pass
./.claude/scripts/check-compiler.sh src/hooks/useActionListContextValue.ts
./.claude/scripts/check-compiler.sh src/hooks/useReportScrollManager/index.ts

Risk. Low-medium. Context shape change.

[melvin-bot]

@adhorodyski Whoops! This issue is 2 days overdue. Let's get this updated quick!