[HOLD for payment 2023-10-09] [HOLD for payment 2023-09-27] [Tracking] Improve ReportScreen re-renders

[mountiny]

Problem

The Report screen has a lot of performance bottlenecks. Mostly they are caused by unnecessary re-renders and given this component is very heavy to render, it can visibly slow down the App.

Solution

This is a tracking issue for multiple PRs and improvements which are found.

We are analysing the render cycles via Flipper Profiler and React Dev Tools and finding where are the bottle necks in the rendering of the component and its sub-tree.

So far we have found bugs regarding shared context and misuse of hooks that cause unnecessary re-renders. It might be an issue of death by a thousand paper cuts where seemingly innocuous changes cause large tree re-renders.

• [HOLD for payment 2023-09-29] Disable hover effect while scrolling in Report Screen on Web #27214

PRs:

• Create REPORT_METADATA onyx key to separate report loading logic from the report data #26173
• Use initialValue in withOnyx and other optimizations for ReportScreen #26772
• Update Onyx to use a map for Onyx collection keys  #27130
• Add initialValue, delayUpdates to allow components to eagerly render. react-native-onyx#329

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010777a443667dee8f
• Upwork Job ID: 1696166898891616256
• Last Price Increase: 2023-08-28

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~010777a443667dee8f

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @ntdiary (Internal)

[ospfranco]

Assign me :)

[melvin-bot]

📣 @ospfranco! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Christinadobrzyn]

Hey @ospfranco can you complete these steps for the Upwork job assignment? Thanks! #26087 (comment)

[ospfranco]

I'm working with margelo internally, do I need an upwork account @mountiny?

[mountiny]

@Christinadobrzyn @ospfranco is from Margelo so he does not use Upwork

[Christinadobrzyn]

Ah! So sorry for my confusion @ospfranco!

[Christinadobrzyn]

I think this can be moved to weekly as it looks like a PR is started.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.75-12 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Use initialValue in withOnyx and other optimizations for ReportScreen #26772

If no regressions arise, payment will be issued on 2023-10-09. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @ospfranco does not require payment (Contractor)
• @fedirjh requires payment
• @situchan requires payment

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[Christinadobrzyn]

hey @situchan or @mountiny are these the two PRS we're paying? or are there more?

If it's only those two, are we ready for payment?

[mountiny]

Correct $1000 to @situchan that is it. Oscar is from agency

[Christinadobrzyn]

Sounds good, sorry for the delay, here is the payment details

Payouts due:

Issue Reporter: NA
Contributor: @ospfranco - payment through Margelo
Contributor+: $1000 @situchan
Contributor+: $1000 @fedirjh

Eligible for 50% #urgency bonus? NA- internal job

@situchan are you paid through Upwork? If yes, can you accept the offer here - https://www.upwork.com/jobs/~0102af23fe16b91266

[mountiny]

@Christinadobrzyn Oscar is paid outside of Upwork since he is from Margelo

[Christinadobrzyn]

Sounds good - thanks @mountiny.

@situchan I paid you based on this payment structure in Upwork.

closing this but let me know if I'm missing anything

[fedirjh]

cc @Christinadobrzyn Seems you have missed #26087 (comment)

[mountiny]

Ah that was my bad too, @fedirjh was additional help on this complex PR, they also reviewed and tested so they should get $1000 too

[Christinadobrzyn]

Ah sorry for missing that @fedirjh - thank you for letting me know.

Can you accept my offer in Upwork here - https://www.upwork.com/jobs/~0102af23fe16b91266

[Christinadobrzyn]

Awesome! @fedirjh Paid you based on this payment structure

I think we're good to close, please reopen if anything else is needed!

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.