App: [$250] [Performance] Investigate `react-freeze` to prevent updates to the LHN / Report page - reported by @vladamx
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
What performance issue do we need to solve?
inefficient React component rendering
Specifically, updates to the SidebarLinks and ReportScreen can cause performance to drop when transitioning between these screens on Androids. Less rendering in theory should yield less work and faster transitions without any changes in behavior for the user.
What is the impact of this on end-users?
Janky transition, slow interactions when chat switching
List any benchmarks that show the severity of the issue
cc @vladamx
Proposed solution (if any)
It sounds like the proposed solution is to try to upgrade to a more recent version of react-native-screens and enable the screen freezing options in the correct places.
List any benchmarks after implementing the changes to show impacts of the proposed solution (if any)
cc @vladamx
Platform:
Where is this issue occurring?
- Web
- iOS
- Android
- Desktop App
- Mobile Web
Version Number: 1.2.11-2 Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation Expensify/Expensify Issue URL:
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 25 (17 by maintainers)
We are getting pretty close to merging a PR that ended up implementing
react-freeze. I think what we should do is:Ultimately, it was their idea to use
react-freezeand I just ended up needing it for another change I am working on. Creating another PR at this point is maybe not worth everyone’s time, but the contribution here was valuable. Alternatively, we could approve the above proposal and merge in the changes - but I’d prefer not to block my other PR on that process.Metric for switching reports might help, but primarily I am looking at which component specifically will you apply the change, and where in terms of the code.
I went through the conversation on the slack and @vladamx’s proposal here. @vladamx Is it possible for you to elaborate on the implementation details? Which part of the codebase? Which screens are we talking about to begin with?
and as @marcaaron mentioned earlier if we can get some benchmarks along with the proposal, it’ll be of great help.
@vladamx maybe you can consider adding some benchmarks here with your proposal. I am guessing that chat switching should improve a bit on Android and would be pretty obvious after the improvement. You can filter for this metric in the JS console like this:
Job created!! https://www.upwork.com/jobs/~012d0f5ce31935509e
@kevinksullivan sorry I’ve been OOO for a family emergency and am only back on 20 Oct, so can’t action, Can you please create a job on upwork and pay @vladamx before closing this? Thanks!
Ok. I will provide the metric and code snippet
@Luke9389 @mananjadhav I’m suggesting we give first dibs to @vladamx to fix this issue. They are working on another small issue atm, but I think totally reasonable for them to work on this one as well.