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

I think the issue is by design, but seems not super great for performance. Fixing it is a bit of a challenge because in order to get the ReportScreen to not completely re-mount we need to update the params with navigation.setParams() and then navigation.closeDrawer() instead of handling it with the pushDrawerRoute() custom action logic.

I am not totally sure, but I think calling CommonActions.reset() here is the reason why the screen completely re-mounts.

What is the impact of this on end-users?

Slow chat switch times.

List any benchmarks that show the severity of the issue

TBD

Proposed solution (if any)

I have to look into this some more, but there might be a way to get it to not completely remount and keep the CommonActions.reset() logic the same more here.

However, there is still a bit of an architectural problem since the current ReportScreen is designed to be torn down and rebuilt each time we navigate to a chat. We did this so things would be easier to reason about.

Changing how this works could be slightly painful and might not be worth it, but a new design for this page might look something like:

• Detect when the the reportID changes
• When it changes show a loader until the data we need from Onyx reaches the component

This way we never have to unmount the screen and can just update the params.

Another alternative to this could be to lazily render entire chats and have them hidden from view and then quickly switch between them. I think our original design looked similar to this, but didn't scale well - especially on mobile so we went with the approach where we re-mount the ReportScreen

List any benchmarks after implementing the changes to show impacts of the proposed solution (if any)

TBD

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on Upwork