[Metrics] Improve Open Report Performance

[rlinoz]

Objective

We want to improve the Open Report performance metric.

Target: 1 second

You can check the current values and monitor progress at:
https://expensify.sentry.io/dashboard/164356/?environment=staging&environment=production&statsPeriod=14d

Issue Owner

Current Issue Owner: @LukasMod

[LukasMod]

Hi, I am Łukasz from Callstack, an expert agency and I can work on this issue.

[rlinoz]

@LukasMod picked this up, what are the next steps here?

[LukasMod]

Sorry for no updates, I was pushing other issue with same priority, moving to this one now

[LukasMod]

General current metric (14days): 1.41s
Platform: Chrome web, P90 - 2.54s,
Latest release: 9.2.78-6 with P90 1.40s

Releases in sample:
9.2.78-X (without -0 and -5), 9.2.77-X

Based on this sample, the largest impact comes from the following spans (from highest to lowest):

1. Search
2. /r/*
3. MoneyRequestReportPreview
4. MoneyRequestReportPreviewContent

I will continue the investigation in this order

[LukasMod]

I had some time investigate this today, but so far nothing new. I don't think its network related, after few tests with 3G network results look similar (so far testing with wide screen layout).

[LukasMod]

Big performance impact I noticed is caused by Search rerenders, most likely due to Onyx state updates after fetching openReport data.

The search screen with the full list of expenses re-renders several times (~6), which can be significant. Especially when the list contains multiple receipt images and many items.

Example: opening a single report from the expenses list (with CPU throttled to 4×).

Search (rerenders whole list):

Report:

A simple test, in which I reduced the number of rendered items to just one, improved navigation time from 4 seconds to 2 seconds. I believe the items in that list should not affect the opened report action at all.

I will try to find real cause of it and limit this impact.

[LukasMod]

I managed to get some more data from performance tab, there is a lot of calculations because of these rerenders

Almost 1s is took by transaction row updates - 580ms + 350s

I checked and by removing list (and its rerender recalculations) improves time by 33% already. We should figure out how to reduce these rerenders in real scenario.

[LukasMod]

To remove these rerenders, we would need to address approximately six different areas where they are caused by useOnyx or isFocused changes. I will proceed with this investigation, as there are significant gains to be made from it (~40% if we reduce list rerenders to 0).

Places causes these rerenders are:

1. ReportScreen => useEffect (line 670) fetchReport, onyx action
2. ReportScreen => ReportFooter => ReportActionCompose => AttachmentPickerWithMenuItems => useOnyx read
   const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, {canBeMissing: true});
3. ReportScreen => ReportActionsView => ReportActionsList => useOnyx read
   const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {canBeMissing: true});
4. ReportScreen => headerView (MoneyRequestHeader) - don't know specifics yet
5. Search => SearchList => renderItem => isFocused
6. Search => SearchList => BaseSearchList => list extraData (isFocused)

OOO: I will be out of the office from 24.12 to 26.12 due to the Christmas break.