[Performance] Conduct React Native Performance Audit

[jsamr]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

This is a follow-up on a conversation I had with @puneetlath. I propose a React performance audit by investigating best practices in load-heavy scenarios. I am planing to use tools such as:

• React Devtools via Flipper for flamegraphs at critical render-points (such as switching conversations);
• React Native Performance and its Flipper plugin;
• Why-did-I-render to make sure tree updates are parsimonious and optimized;
• Native tooling for memory and CPU usage;

Main objectives:

• Identify bottlenecks and area of improvements;
• App footprint assessments.

Deliverable:

The conclusions and analysis will be delivered in the form of a technical report.

Additional info

For best results, I'd like detailed steps to reproduce scenarios which are known to cause performances issues.

[MelvinBot]

Triggered auto assignment to @sophiepintoraetz (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[sophiepintoraetz]

Hey @jsamr - can you please provide some more context on:

- Identify bottlenecks and area of improvements;
Are there going to be recommendations on actions to take for improvements? Who needs to implement them?

- The conclusions and analysis will be delivered in the form of a technical report.
How often will this happen? Who receives this report? How do you ensure that any of the improvements have been implemented? Could we not create a GH assignment, much like we've done here, for any tasks that need to be completed?

[jsamr]

Hi @sophiepintoraetz! Puneet suggested that I open an issue so that he can link an upwork job (I'm a freelancer).

Are there going to be recommendations on actions to take for improvements? Who needs to implement them?

There will probably be! But who will implement them is not my call. I think all of this will be worked out by Puneet directly, or by whoever should be considered the referral, @marcaaron perhaps?

How often will this happen? Who receives this report?

This should be a one-shot work; all the other questions are rather internal so I'll let your team figure it out :-)

[quinthar]

This sounds a bit ambiguous and open-ended,, and thus unlikely to produce any actual optimizations for many days or even weeks, so this can't be our top proposal for solving the current performance emergency.

However, it feels like we are kind of desperate right now and grasping at straws, so I am in total support of getting started on this right away even though I'm a little unclear on what exactly it's going to come out of it.

[quinthar]

Can you confirm that you are going to run this on all four platforms, and produce a prioritized list of recommendations that are sufficiently specific that we can turn them into projects immediately after?

[jsamr]

@quinthar

This sounds a bit ambiguous and open-ended

I agree it's somehow generic and exploratory ; the idea was to investigate performance in well-defined scenarios and pinpoint identifiable bottlenecks. I see three potential causes:

• JavaScript / native bridge;
• Extreneous re-renders;
• Long render times (which often come up to too many items to render, a bridge bottleneck, slow I/O operations).

Can you confirm that you are going to run this on all four platform

Yes, although I would assume that electron and web can be conflated.

produce a prioritized list of recommendations that are sufficiently specific that we can turn them into projects immediately after

Sure. I'll state which code area is at stake and to which part of React Native architecture it belongs.

[sophiepintoraetz]

Sounds like more discussion to be had - but I feel like @puneetlath would be a better triager here / assigning to engineering to field the discussion.