[Performance] [Audit] `ReportActionContextMenu` slows down cell rendering time significantly

If you haven’t already, check out our contributing guidelines for onboarding and email [e-mail] to request to join our Slack channel!

---

This report is part of #3957, scenario “Rendering Individual chat messages”.

Pattern

The full commit log can be inspected with Flipper or React Devtools, see https://github.com/Expensify/Expensify.cash/issues/3957#issuecomment-881045715 for instructions.

This commit chart spans over 1.4s (c77 to c144). Each spike in the chart is a ReportActionContextMenu rendered for one cell.

Flamegraph

This is an excerpt of the 100th commit (c100):

Also note that those spikes could be caused by the heavy usage of react-native-svg, which can impede performance. Quoting William Candillon

Using SVG heavily in an app can degrade its performance, therefore use it with parsimony."

Proposal: render only one context menu, change dynamically its content on press

Instead of rendering ReportActionContextMenu for every cell, render only one menu at the root of the screen. When a report action is pressed, pass the parameters required to update the view to a callback and render the content accordingly. The callback can be shared via a React context.

[marcaaron]

I gotchu @parasharrajat

[parasharrajat]

Opening an issue for this. Thanks for the Information.