-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
perf: Optimize AppNavigator #42532
perf: Optimize AppNavigator #42532
Conversation
🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪 |
Reviewer Checklist
Screenshots/VideosAndroid: Native42532-android-ns.mp4Android: mWeb Chrome42532-androidmWeb-ns.mp4iOS: Native42532-iOS-ns.mp442532-iOS2-ns.mp4iOS: mWeb Safari42532-iOSmWeb-ns.mp4MacOS: Chrome / Safari42532-webChrome-ns.mp4MacOS: Desktop42532-desktop-ns.mp4 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Flamegraph chart processing of the recording did not work for me.
Tested generally. Code changes also look good.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, the changes are looking good to me, @Julesssss is out of office until Wednesday based on the calendar so going to move ahead with this
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
🚀 Deployed to production by https://github.com/Julesssss in version: 1.4.79-11 🚀
|
Details
The PR decreases the render duration and avoids redundant re-renders of AppNavigator.
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 withrequire
, but it takes much less time around 17ms for AppNavigator and Suspense together. The time savings is great. Also, it is a common practice for React apps.Note: it doesn't make any sense on mobile as the code was already compiled and Hermes loads instantly.
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.
I am attaching screenshots with the legacy (1st) and updated (2nd) versions.
Details
Logacy
Updated
Fixed Issues
$ #42744
PROPOSAL: https://callstack-hq.slack.com/archives/C05LX9D6E07/p1716915477598019
Tests
Offline tests
Same as "Tests".
QA Steps
Same as "Tests".
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodSTYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label and/or tagged@Expensify/design
so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop