[Due for payment 2025-07-04] Improve export and action component list performance

[mjasikowski]

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

Components to Optimize

• ExportIntegration.tsx
• ExportWithDropdownMenu.tsx
• ActionableItemButtons.tsx
• ChronosOOOListActions.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

Issue Owner

Current Issue Owner: @hoangzinh

[hoangzinh]

Hi @mjasikowski @Pujan92, For ExportWithDropdownMenu component, I found that it isn't always displayed for all report action, it's only displayed when workspace is connected to an accounting

App/src/components/ReportActionItem/ReportPreview.tsx

Lines 595 to 605 in cab551a

	[CONST.REPORT.REPORT_PREVIEW_ACTIONS.EXPORT_TO_ACCOUNTING]: connectedIntegration ? (
	<ExportWithDropdownMenu
	report={iouReport}
	connectionName={connectedIntegration}
	wrapperStyle={styles.flexReset}
	dropdownAnchorAlignment={{
	horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
	vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
	}}
	/>
	) : null,

Question: Should we move those useOnyx connections in this component up to the list level?

App/src/components/ReportActionItem/ExportWithDropdownMenu.tsx

Lines 47 to 48 in cab551a

	const [exportMethods] = useOnyx(ONYXKEYS.LAST_EXPORT_METHOD, {canBeMissing: true});
	const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {canBeMissing: true});

[hoangzinh]

Hey @TMisiukiewicz Do you mind sharing your thoughts on the above? Technically, we can do it, but I'm concerned it's an edge case, but we have to preload exportMethods and reportActions of iouReport at the list level, and another concern is we will pass them as props to all ReportActionItem.

[TMisiukiewicz]

Hey @hoangzinh, for reportActions we have it in MoneyRequestReportPreviewContent:

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Line 194 in 89d03e5

const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReportID}`, {canBeMissing: true});

I think it would be great to lift this up and pass it down, then it could be reused everywhere we need including ExportWithDropdownMenu. Then same thing would go to ReportPreview, but I think this component is not used anymore since we have table report view enabled.

For exportMethods, I think we can leave it for now as it is since it's not always used. We can measure it's impact on performance later and adjust if needed

[hoangzinh]

Thank you @TMisiukiewicz