[Performance] Onyx usage in `withLocalize` adds a significant overhead

[kidroca]

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

---

What performance issue do we need to solve?

e.g. memory consumption, storage read/write times, React native bridge concerns, inefficient React component rendering, etc.

• storage read/write times
• inefficient React component rendering

This component is one of the most used components and has more than 310 instances depending on chat size
The current way that the HOC works is that it will make a new Onyx connection per each withOnyx instance.
A benchmark reviewed that for a large chat the we're spending about 50sec for the Onyx.get related to retrieving the preferredLocale

What is the impact of this on end-users?

List specific user experiences that will be improved by solving this problem e.g. app boot time, time to for some interaction to complete, etc.

• app boot time
• chat switching time

List any benchmarks that show the severity of the issue

Please also provide exact steps taken to collect metrics above if any so we can independently verify the results.

I'm using Onyx.printMetrics() to monitor the Onyx.get calls that happen during init: https://github.com/Expensify/react-native-onyx#benchmarks

Results

Device	Samsung Galaxy S7 Edge (2016)
OS	Android 8.0

Total:	123.80sec			Last	17.49sec			ReportID	71955477

method	total time spent	max	min	avg	time last call completed	calls made
Onyx:get	96.85sec	2.92sec	0.10ms	144.77ms	17.48sec	669

• Full info in excel: https://docs.google.com/spreadsheets/d/1wGrVXsad6ayQZVqvyUmTuTb1cmeegdE0y-IFzhLiPKU/edit#gid=73551349&range=J8 (search for preferredLocale)

Setup

Using this Expensify/App hash: b2582f3
Modify this file: src/Expensify.js

• For Onyx.init add captureMetrics: true
• At the end of the file add global.Onyx = Onyx;

Modify src/libs/Navigation/AppNavigator/MainDrawerNavigator.js

• Make getInitialReportScreenParams always return the same report
• e.g. return {reportID: '71955477'};

Start the app and connect with Flipper or a Hermes Debugger

Steps

1. Reload the app
2. Wait for processes to settle (about 5-10sec after LHN loads)

• you can use Onyx.printMetrics({ format: 'string' }}) when it starts to return the same value - everything is loaded

3. Run Onyx.printMetrics({ format: 'csv', raw: true })
4. Copy the results to a temp file
5. Import file as new sheet in excel

Proposed solution

Extract a LocaleContextProvider that wraps the App - the implementation would be pretty much identical to how the class WithLocalize works at the moment:

App/src/components/withLocalize.js

Line 49 in ad77386

class WithLocalize extends React.Component {

The difference would be that it will render a React ContextProvider component
Now only the top level component that wraps the App subscribes to Onyx
The HOC withLocalize changes to use a LocaleContextConsumer
It uses the context to get translation related props and pass them to the WrappedComponent
Everything else stays the same

List any benchmarks after implementing the changes to show impacts of the proposed solution (if any)

Note: These should be the same as the benchmarks collected before any changes.
I've done a quick test to verify there will be a significant reduction in Onyx.get time. It's demonstrated in the initial changes in the PR here: #4253

Total:	62.62sec			Last	12.27sec			ReportID	71955477

method	total time spent	max	min	avg	time last call completed	calls made
Onyx:get	40.44sec	1.79sec	0.08ms	139.94ms	12.27sec	289

Platform:

Where is this issue occurring?

• Web
• iOS
• Android (Biggest impact)
• Desktop App
• Mobile Web

Version Number: 1.0.80-2
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @mountiny (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[kidroca]

Issue created per the discussion here: #4253 (comment)

[mountiny]

@kidroca 👋 Since this is a daily issue, can you try to drop some line here every working day to update on your progress. Either some summary of what has been done in the Draft PR (it helps to see the steps made in a bigger picture) or simply that you have not had time to work on this that given day.

Thank you very much and have a great day 🙌

[kidroca]

@mountiny
OK will do.
I wasn't sure I should be working on this ticket before someone officially approved it
Also ATM the ticket is not assigned to me, can you add me to the assignees?

[MelvinBot]

Triggered auto assignment to @JmillsExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[mountiny]

@kidroca Feel free to start working on this. Performance is very important to us right now. Jason should be able to create the Upwork job for you 🙌

Let me know if you will need help with anything!

[kidroca]

Thanks, I just needed the green light
Instead of creating an Upwork job I think I can just log my work for this ticket under my hourly contract

cc @arielgreen

[mountiny]

@kidroca Ah, you are right, I was not aware of this. I believe that is the way to go. Is that right, Ariel? :) Thank you for confirming!