[Due for payment 2025-06-24] Improve task and trip related list components performance

[mjasikowski]

Improve ReportActionsList performance by moving useOnyx connections from task and trip components up to the list level, following the pattern established in PR #63362.

Components to Optimize

• TaskAction.tsx
• TaskPreview.tsx
• TaskView.tsx
• TripDetailsView.tsx
• TripRoomPreview.tsx

Testing & Performance Validation

1. Before Changes: Record performance traces using React Profiler
2. After Changes: Record the same interactions
3. Analysis: Import traces into https://kacper-mikolajczak.github.io/rcc/ with 'before' as baseline
4. Share Results: Include performance comparison in PR

[hoangzinh]

Hi @adhorodyski @TMisiukiewicz, I need advice on TaskPreview, currently it subscribes to Onyx to get report of taskReportID

App/src/components/ReportActionItem/TaskPreview.tsx

Line 86 in 4a27ad0

const [taskReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`, {canBeMissing: true});

Which is retrieved from the original action

App/src/pages/home/report/PureReportActionItem.tsx

Line 924 in 4a27ad0

taskReportID={getOriginalMessage(action)?.taskReportID?.toString()}

I think, in order to move useOnyx connections in this case, the ReportActionsList will subscribe to all reports, then pass down to child components, then we retrieve the report from that props here

Should we do that? Or we can leave it as it is in case of TaskPreview? Thank you

[TMisiukiewicz]

@hoangzinh yeah I think it's fine to do it the way you described 👍

[hoangzinh]

Thank you @TMisiukiewicz