[HOLD for payment 2024-06-13] [LOW] [Performance] Improve AppNavigator Performance

[mountiny]

Coming from here. @rezkiy37

Problem

There is a core component of the app - AppNavigator. Basically, it renders AuthScreens or PublicScreens based on a prop - authenticated. Currently, the component takes around 250ms to render. Also, it re-renders several times.

1. The component uses require to import children. I have a concern regarding this approach. Because require is a function in Node.js for importing modules. It’s synchronous and will halt execution until the module is loaded. It’s not typically used in the front-end code of a React application, as it doesn’t support code splitting or lazy loading. require might be used in certain scenarios, such as server-side rendering or when working with Node.js back-end code.
2. The component re-render several times, because the parent component re-renders. However, the property is not changed. Also, PublicScreens re-renders 3 times.

Solution

I propose to decrease the render duration and avoid redundant re-renders.

1. React.lazy is a function that lets you render a dynamic import as a regular component. It makes it easy to code split a React application and lazily load components as they are needed, which can significantly improve the load time of your application. The idea is still the same as with require, but it takes much less time around 17ms for AppNavigator and Suspense together. The time 1. savings is great. Also it is a common practice for React apps.
   Wrap the component in React.memo to get a memoized version of that component. And, as a result, AppNavigator renders once and does not re-render anymore until the user logins/logouts (authenticated changed). PublicScreens renders once as well.

There is a commit here. I am attaching screenshots with the legacy (the 1st) and updated (the 2nd) versions.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ec3bf0fc8d2fa2f1
• Upwork Job ID: 1795785815695171584
• Last Price Increase: 2024-05-29

Issue Owner

Current Issue Owner: @alexpensify

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[rezkiy37]

Hi, I’m Michael (Mykhailo) from Callstack and I would like to work on this issue.

[Julesssss]

Hey @rezkiy37, great work so far

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01ec3bf0fc8d2fa2f1

[melvin-bot]

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

[rezkiy37]

Measuring on IOS and Android Production-Release builds.

[c3024]

Working on it. Not overdue.

[Julesssss]

PR is in draft, I'll generate testable builds soon

[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.4.79-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• perf: Optimize AppNavigator #42532

If no regressions arise, payment will be issued on 2024-06-13. 🎊

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

• @rezkiy37 does not require payment (Contractor)
• @c3024 requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@c3024] The PR that introduced the bug has been identified. Link to the PR:
• [@c3024] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@c3024] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@c3024] Determine if we should create a regression test for this bug.
• [@c3024] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[alexpensify]

To prepare for the payment date, @c3024 please accept the invite here: https://www.upwork.com/jobs/~01ec3bf0fc8d2fa2f1. Tomorrow, I'll complete the payment process in Upwork. Thanks!

[c3024]

@alexpensify Thanks, accepted the invite.

[melvin-bot]

Payment Summary

Upwork Job

• Contributor: @rezkiy37 is from an agency-contributor and not due payment
• ROLE: @c3024 paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@alexpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1795785815695171584/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[alexpensify]

Payouts due: 2024-06-13

• Contributor: $250 @rezkiy37 - is from an agency-contributor and not due payment
• Contributor+: $250 @c3024 - Paid via Upwork!

Upwork job is here.