Screen transitions trigger an excessive number of react commits

[muttmuure]

Coming from here: https://expensify.slack.com/archives/C05LX9D6E07/p1694783353289039

Problem

A number of screen transitions (we mainly looked at screens related to workspaces) trigger an excessive number of react commits.

In some scenarios we are seeing hundreds of commits (250+).The majority of these commits are due to subscriptions to onyx.

Solution

We should aim at having juts a few commits when a screen is being pushed (ideally just one commit).

Updates for components rendered in a single batch should also be triggered in a single batch and committed with a single commit.

Figure out how to extend Expensify/react-native-onyx#315 to web.

[palys-swm]

We've checked how it performs now and it seems that the number of renders decreased by a lot. On iOS, about 15-20 commits are being performed, while on the web it is about 30 - a huge improvement! Most of the commits are unrelated to Onyx. We're still working on proposing a solution that can further decrease the number of them.

At this point, the delay in displaying the workspaces list on iOS is mostly caused by rendering a list of MenuItems which are really expensive (WorkspacesListPage renders each MenuItem at least twice. The most expensive render of a single item can take up to 7ms.). This probably should be tracked as a separate issue.

[melvin-bot]

📣 @palys-swm! 📣
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. Make sure you've read and understood the contributing guidelines.
2. 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.
3. 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.
4. 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>

[sebryu]

Hey. I've been working on multiple performance issues, and while they were not only related to screen transition, they help with rendering of both left navbar & report screen itself.

1. Optimize components using report with hasDraft - Optimized listening to hasDraft property changes #30031
2. Ongoing optimization for personalDetailsList - Created migration to change ONYX resource personalDetailsList to COLLECTION #30333

When the second would be merged I can make screen transition profiling once more (that could increase number of react commits but they would be much shorter).

Re. proposed solution

Figure out how to extend Expensify/react-native-onyx#315 to web.

I believe that onyx change is already used by the web app for some time, so it could also have positive impact on performance.

[mountiny]

I think we can close this catch all issue as we have made some improvements already and we can focus on new improvements in more directed/ specific problem/ solution issues