Use initialValue in withOnyx and other optimizations for ReportScreen #26772

ospfranco · 2023-09-05T12:49:21Z

Details

This PR makes further improvements to the ReportScreen. It is based on the changes of the previous PR.

A summary of the changes:

A lot of re-renders were caused by react-native-onyx delaying the rendering because it had to fetch data from the DB. This was solved by adding a initialValue to the withOnyx HOC. This allows components to mount ASAP. This had to be manually added to the components that were causing a re-render.
Large components with a lot of onyx connections would also block rendering as data was being fetched/hydrated to the component. This was a particular case of ReportScreen. A solution was implemented where we tell onyx to delay updates until the component has been mounted. This allows React to perform a render instead of blocking completely.
ReportScreenWrapper was using an internal hook to update route params. This was moved into its own component to avoid a large tree-rerender
HeaderView.js had unused onyx connections and was returning a new object every time. Causing a re-render
Some other minor optimizations like skipping some hooks on first render.

This PR is also dependant on changes we made to react-native-onyx in this PR those need to be merged and published first.

Fixed Issues

$ #26087

Tests

Verify that no errors appear in the JS console

Offline tests

QA Steps

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

# Conflicts: # src/pages/home/ReportScreen.js

# Conflicts: # src/pages/home/report/ReportActionItem.js

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>

melvin-bot · 2023-09-05T12:49:26Z

@situchan Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

janicduplessis · 2023-09-07T16:34:29Z

I did another round on profiling on this branch and found some more improvements

Prevent SidebarLinks from re-rendering on opening report

currentReportID is passed as a prop down to SidebarLinks and causes a re-render of the whole list when opening a new report. Turns out SidebarLinks only uses currentReportID in the showReportPage function which is invoked when clicking a report and never in the render path so we can use Navigation.getTopmostReportId to get it without having to pass it as prop and causing a re-render. We also have onyx connected to fetch the current report which is never used so we can remove that too. After that SidebarLinks won't re-render on opening a report since it is a pure component and props do not change even if parent SidebarLinksData re-renders.

Before:

After:

The perf impact is pretty minimal, but it is also a good change to cleanup SidebarLinks. Ideally SidebarLinksData would not re-render at all but getOrderedReportIDs is dependent on the currentReportID.

Diff: janicduplessis@b47663e

Reduce SidebarLinksData render time

I was able to get this render down more significantly by changing the memoization to separate getOrderedReportIDs from currentReportID, but this will cause slight behaviour change since if for some reason the opened report is not in the reports list, it will be added at the start instead of being added where it should be according to the sorting logic. I feel like the case where the opened report is not visible in the report list should be very rare, but I am not familiar enough with the product to know for sure. Another option to preserve 100% behaviour at the cost of performance would be to compute the reports list a 2nd time if the current report is not visible. This will result in 2x worst perf for the edge case of the current report not being visible, but great improvement in the common case. I think someone with more product knowledge could make the call on this one.

Diff: janicduplessis@2c14b62

Will update this as I find more things

- Add initial values to different components to allow immediate mounting/rendering - Delay the initialization of certain values to allow React to flush the queue immediately - Remove unnecessary Onyx values

ospfranco · 2023-09-11T09:57:32Z

I applied the first performance update suggested by @janicduplessis, tested it and everything is working fine.

I will wait for the green light from someone in expensify to approve the change in the second suggestion.

mountiny · 2023-09-11T13:14:42Z

@ospfranco can you also sync up with main please?

fedirjh · 2023-09-25T18:05:43Z

I think we have a weird bug, I've been testing some reports , and sometimes, instead of the skeleton view, the "not found" view is displayed. This issue has occurred with older reports when opening reports with old tasks tasks.

This bug is also affects distance requests and money requests.

Edit : Affects threads as well, I guess it affects all nested reports.

Steps to reproduce

Fresh login
Open an old report that have some old tasks / Open an old IOU/Expense report
Open a task report / Open an old money request

CleanShot.2023-09-25.at.18.57.04.mp4

fedirjh · 2023-09-25T18:22:25Z

src/pages/home/ReportScreen.js


    const shouldHideReport = !ReportUtils.canAccessReport(report, policies, betas);

-    const isLoading = !reportID || !isSidebarLoaded || _.isEmpty(personalDetails) || firstRenderRef.current;


I am suspecting this change has caused this bug #26772 (comment) , isLoading is used inside shouldShowNotFoundPage which display the not found view. I guess before this change isLoading was initially set as true but it has changed to be set initially as false and that will affect the value of shouldShowNotFoundPage.

The problem with that first render is that it would delay the rendering one extra cycle at which point onyx would be already trying to shove data into the component and would delay the rendering again. However I don't think there is a way around it at this point. I will just revert it and we can revisit this again later.

However I don't think there is a way around it at this point.

@ospfranco Instead of reverting and losing the optimisation effect , why don't we just update shouldShowNotFoundPage to account for the first render ?

ospfranco · 2023-09-26T06:25:32Z

@fedirjh I've reverted the change to the isLoading flag. I've tested it with my account but I'm not sure if I can reproduce it with any of the chats I have. Can you take a look and confirm it is working?

fedirjh · 2023-09-26T10:31:40Z

Can you take a look and confirm it is working?

@ospfranco Yes that fixes the bug , but it brings back the skeleton bug , when you navigate between opened reports, the skeleton is briefly displayed.

# Conflicts: # src/libs/DateUtils.js

fedirjh · 2023-09-26T13:44:52Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android / native
- Android / Chrome
- iOS / native
- iOS / Safari
- MacOS / Chrome / Safari
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

CleanShot.2023-09-26.at.13.08.44.mp4

Mobile Web - Chrome

CleanShot.2023-09-26.at.13.23.15.mp4

Mobile Web - Safari

CleanShot.2023-09-26.at.13.18.57.mp4

Desktop

CleanShot.2023-09-26.at.14.41.41.mp4

iOS

CleanShot.2023-09-26.at.13.59.24.mp4

Android

CleanShot.2023-09-26.at.14.39.11.mp4

fedirjh

All yours @mountiny.

mountiny · 2023-09-27T06:03:26Z

src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js

+ * Get the most recently accessed report for the user
+ *
+ * @param {Object} reports
+ * @param {Boolean} [ignoreDefaultRooms]


Does not seem to have a default value set, also there are required params coming after

Suggested change

* @param {Boolean} [ignoreDefaultRooms]

* @param {Boolean} ignoreDefaultRooms

I'm not sure I understand. This is just an internal function and doesn't require a default value, it should always be called with a boolean value:

Yeah but the [] in js docs means optional parameter, but this is not optional parameter but the looks of things

Ah, this wasn't my code, just moved it from the wrapper. But it is fixed.

src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js

mountiny · 2023-09-27T06:05:41Z

src/pages/home/report/ReportActionCompose/SilentCommentUpdater.js

 export default withOnyx({
    comment: {
        key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`,
+        initialValue: null,


Did you forget to apply this suggestion?

mountiny · 2023-09-27T06:06:42Z

src/pages/home/report/ReportActionsList.js

+        if (didManuallyMarkReportAsUnread) {
+            // Clearing the current unread marker so that it can be recalculated
+            setCurrentUnreadMarker(null);
+            setMessageManuallyMarkedUnread(new Date().getTime());
+        } else {
+            setMessageManuallyMarkedUnread(0);


I think we should have an early return here as that is preferred

mountiny · 2023-09-27T06:09:10Z

src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js

+};
+
+// This wrapper is reponsible for opening the last accessed report if there is no reportID specified in the route params
+function ReportScreenIDSetter(props) {


This is a new component and we prefer destructuring the props, can you please do that here?

mountiny

Thanks! looking great!

ospfranco · 2023-09-27T06:40:11Z

Ah, unit test is failing, let me take a look

OSBotify · 2023-09-28T02:44:01Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2023-09-28T19:17:00Z

🚀 Deployed to staging by https://github.com/mountiny in version: 1.3.75-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

roryabraham · 2023-10-02T05:53:11Z

src/ONYXKEYS.ts

        POLICY_RECENTLY_USED_TAGS: 'policyRecentlyUsedTags_',
        WORKSPACE_INVITE_MEMBERS_DRAFT: 'workspaceInviteMembersDraft_',
        REPORT: 'report_',
+        REPORT_METADATA: 'reportMetadata_',


Request: can we please add a comment to explain what belongs in report_ and what belongs in reportMetadata_. Without all the context the distinction isn't very clear.

For now we've separated the loading states isLoadingReportActions and isLoadingMoreReportActions into reportMetadata_, as they were causing many re-renders on smaller components every time the report actions were being fetched. It makes sense to add it a comment for future reference.

Thanks, sounds good. Maybe the distinction is that REPORT_METADATA is for client-generated data?

It's a performance optimization, not a hard cut between functionality/logic.

OSBotify · 2023-10-02T17:20:56Z

🚀 Deployed to production by https://github.com/mountiny in version: 1.3.75-12 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

OSBotify · 2023-10-02T17:49:31Z

🚀 Deployed to staging by https://github.com/mountiny in version: 1.3.76-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-10-03T15:50:28Z

🚀 Deployed to production by https://github.com/mountiny in version: 1.3.76-6 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

ospfranco and others added 14 commits August 25, 2023 17:03

Separate ReportScreenContext to prevent cyclic re-renders

3be5e69

Get rid of full list re-render when marking messages as unread

6125c38

Linting

be7ea56

Merge branch 'main' into osp/ReportScreen-optimizations

caed994

Merge branch 'main' into osp/ReportScreen-optimizations

37926ee

# Conflicts: # src/pages/home/ReportScreen.js

create new onyx metadata collection and connect components

90c9119

Clean code on ReportScreen main body

9829fd8

Merge branch 'main' into osp/report-metadata

bbeb353

# Conflicts: # src/pages/home/report/ReportActionItem.js

Do not use context on SidebarLinks

426c3cb

Eagerly initialize date-fns locale

9fd2f94

Update src/pages/home/ReportScreen.js

b3b33eb

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>

Update src/pages/home/report/ReportActionsList.js

40d48bb

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>

Remove requestIdleCallback as it might not be available everywhere

14808d9

Merge branch 'main' into osp/report-metadata

4f75359

ospfranco requested a review from a team as a code owner September 5, 2023 12:49

melvin-bot bot requested review from situchan and removed request for a team September 5, 2023 12:49

janicduplessis mentioned this pull request Sep 7, 2023

[HOLD for payment 2023-10-02] [HOLD] [Performance] ReportScreen unnecessary re-renders #15163

Closed

6 tasks

ospfranco added 2 commits September 8, 2023 10:28

Fix wrong variable name

6effb37

Report screen performance improvements

3619a25

- Add initial values to different components to allow immediate mounting/rendering - Delay the initialization of certain values to allow React to flush the queue immediately - Remove unnecessary Onyx values

ospfranco force-pushed the osp/further-report-screen-optimizations branch from 566e19b to 3619a25 Compare September 8, 2023 14:05

ospfranco mentioned this pull request Sep 8, 2023

Add initialValue, delayUpdates to allow components to eagerly render. Expensify/react-native-onyx#329

Merged

Prevent SidebarLinks from re-rendering on opening report

eb44749

Julesssss assigned ospfranco Sep 12, 2023

Julesssss added the Ready To Build label Sep 12, 2023

mountiny mentioned this pull request Sep 12, 2023

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

Closed

fedirjh reviewed Sep 25, 2023

View reviewed changes

Revert firstRenderRef calculation of isLoading flag

3825371

ospfranco added 2 commits September 26, 2023 13:59

Move firstRenderRef from isLoading to shouldShowNotFoundPage

24710b7

Merge branch 'main' into osp/further-report-screen-optimizations

ee7f4c7

# Conflicts: # src/libs/DateUtils.js

fedirjh approved these changes Sep 26, 2023

View reviewed changes

mountiny requested changes Sep 27, 2023

View reviewed changes

PR Comments

f006f1d

mountiny approved these changes Sep 27, 2023

View reviewed changes

Merge branch 'main' into osp/further-report-screen-optimizations

3aaef2f

mountiny merged commit 86c0658 into Expensify:main Sep 28, 2023

ospfranco deleted the osp/further-report-screen-optimizations branch September 28, 2023 05:34

OSBotify mentioned this pull request Sep 28, 2023

Deploy Checklist: New Expensify 2023-09-28 #28412

Closed

cristipaval mentioned this pull request Sep 29, 2023

[HOLD for payment 2023-10-18] [$500] Chat - No loading animation when scrolling through chat history offline #28466

Closed

6 tasks

situchan mentioned this pull request Sep 29, 2023

[HOLD for payment 2023-10-10] [HOLD for payment 2023-10-09] Chat - Deeplinks - Skeleton is shown instead "You don’t have access" page #28489

Closed

6 tasks

mkhutornyi mentioned this pull request Oct 1, 2023

[HOLD for payment 2023-10-10] [$250] App crashing when clicked send message from Fub menu quickly after sign in from google #28504

Closed

6 tasks

roryabraham reviewed Oct 2, 2023

View reviewed changes

ospfranco mentioned this pull request Oct 2, 2023

[NoQA] Add small comment about REPORT_METADATA onyx key #28581

Merged

59 tasks

OSBotify mentioned this pull request Oct 2, 2023

Deploy Checklist: New Expensify 2023-10-02 #28635

Closed

fedirjh mentioned this pull request Oct 10, 2023

[HOLD for payment 2023-10-10] [$125] Task - When the receiver clicks on a task, "Hmm... it's not here" is displayed briefly #28508

Closed

6 tasks

fedirjh mentioned this pull request Nov 1, 2023

[HOLD for payment 2023-10-30] [$500] API - 404 Returns On AuthenticatePusher API #29116

Closed

6 tasks


		const shouldHideReport = !ReportUtils.canAccessReport(report, policies, betas);

		const isLoading = !reportID \|\| !isSidebarLoaded \|\| _.isEmpty(personalDetails) \|\| firstRenderRef.current;

	* @param {Boolean} [ignoreDefaultRooms]
	* @param {Boolean} ignoreDefaultRooms

Use initialValue in withOnyx and other optimizations for ReportScreen #26772

Use initialValue in withOnyx and other optimizations for ReportScreen #26772

Uh oh!

Conversation

ospfranco commented Sep 5, 2023

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot bot commented Sep 5, 2023

Uh oh!

janicduplessis commented Sep 7, 2023

Prevent SidebarLinks from re-rendering on opening report

Reduce SidebarLinksData render time

Uh oh!

ospfranco commented Sep 11, 2023

Uh oh!

mountiny commented Sep 11, 2023

Uh oh!

fedirjh commented Sep 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fedirjh Sep 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ospfranco commented Sep 26, 2023

Uh oh!

fedirjh commented Sep 26, 2023

Uh oh!

fedirjh commented Sep 26, 2023

Reviewer Checklist

Screenshots/Videos

Uh oh!

fedirjh left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

ospfranco commented Sep 27, 2023

Uh oh!

OSBotify commented Sep 28, 2023

Uh oh!

OSBotify commented Sep 28, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ospfranco Oct 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

OSBotify commented Oct 2, 2023

fedirjh commented Sep 25, 2023 •

edited

Loading

fedirjh Sep 25, 2023 •

edited

Loading

ospfranco Oct 2, 2023 •

edited

Loading