[$250] [Performance] MainDrawer re-renders unnecessarily reported by @vladamx

[marcaaron]

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

---

What performance issue do we need to solve?

inefficient React component rendering

What is the impact of this on end-users?

slightly slower speeds to render a report

List any benchmarks that show the severity of the issue

Before

Timing:expensify.cash.switch_report.cold 222
Timing:expensify.cash.switch_report.cold 210
Timing:expensify.cash.switch_report.cold 222

Proposed solution (if any)

Prevent the Main drawer from re-rendering by only allowing it to re-render if we do not yet have the initial params.

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

After

Timing:expensify.cash.switch_report.cold 176
Timing:expensify.cash.switch_report.cold 190
Timing:expensify.cash.switch_report.cold 175

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.2.9-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Upwork URL: https://www.upwork.com/jobs/~01c2ba78197b3488bc
Reported by: @vladamx

View all open jobs on Upwork

[marcaaron]

This was reported by @vladamx so I think we should give them first dib on this.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (External)

[melvin-bot]

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

[trjExpensify]

Sounds good! Job is on Upwork here: https://www.upwork.com/jobs/~01c2ba78197b3488bc

[vladamx]

@marcaaron Thank you for bringing this up! Hope we can do a whole suite of optimizations to improve perf in Expensify!

Intro

MainDrawerNavigator calculates initial report to open and therefore subscribes to reports which can change many times during the lifecycle of the app even though the data is only needed initially - on app launch.

Profiling done below is just for the use case when user is adding a message to any report where you can see the savings of around 120ms only for the add message to chat.

Greater savings are achieved if you take into account all mutations that can happen on reports.

Profiling - Before

As you can see MainDrawer is re-rendered 3 times during adding a message to chat with a penalty of 3 * 42.5ms = 127.5ms

Profiling - After memoization on initialReport calculation

3 x 0.5 ms = 1.5ms

So we achieved savings of 126ms of render time only for adding new message which is significant when you take into account how small render budget is.

[melvin-bot]

📣 @vladamx You have been assigned to this job by @marcaaron!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[vladamx]

Proposal sent to Upwork.

PR 1.10.2022

[trjExpensify]

Hired! 🎉

[vladamx]

PR: #11506 (comment)

[trjExpensify]

PR is in active review.

[trjExpensify]

C+ reviewed. Over to @deetergp now and we should be good to go!

[trjExpensify]

Deployed to staging. Once it hits prod, the payout clock begins! 🎉

[vladamx]

Am I eligible for reporting bonus as well?

[trjExpensify]

Yep! When I go to pay you out, I'll add that.

[rushatgabhane]

@trjExpensify payment can be done for this issue #11506 (comment)

[trjExpensify]

Yeah, interesting. Any idea why the title didn't update with the payment date?

@vladamx - paid + reporting bonus.
@rushatgabhane - sent you the offer.

[rushatgabhane]

@tjferriss im not sure, but the cause must be intermittent

[trjExpensify]

Gotcha. Alrighty, all settled up here. Thanks everyone! 🎉