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?
We want to avoid doing unnecessary work, especially on low end mobile devices, to get the most performance budget as possible for important tasks.
Right now, the UserDetailsTooltip is only affecting web/desktop users that can hover over a user. Mobile users cannot. However, we are rendering that component on every platform.
We are e.g. rendering it in the report list, and thereby we are creating unnecessary renders. Even though it has no UI its connecting to onyx which is slightly blocking, and we want to avoid that:
What is the impact of this on end-users?
Especially on lower end devices we will gain a bit of our performance budget back making other important operations slightly faster.
List any benchmarks that show the severity of the issue
Using the react-devtools and profiling the app with the release bundle. We don't want to see render commits of unnecessary components like UserDetailsTooltip
Proposed solution (if any)
Very simple:
- Rename
UserDetailsTooltip/index.js to UserDetailsTooltip/index.web.js
- Create a new
UserDetailsTooltip/index.js, which is just forwarding the children
List any benchmarks after implementing the changes to show impacts of the proposed solution (if any)
Measure the app start again with react-devtools, there now should be less commits.
I applied the proposal and checked again. In the previous profile we had 75 commits, after the change it only were 69 and we can't find any rendering of the UserDetailsTooltip
Platforms:
Which of our officially supported platforms is this issue occurring on?
Version Number: latest/main
Reproducible in staging?: yes
Reproducible in production?: yes
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:
View all open jobs on Upwork
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?
We want to avoid doing unnecessary work, especially on low end mobile devices, to get the most performance budget as possible for important tasks.
Right now, the
UserDetailsTooltipis only affecting web/desktop users that can hover over a user. Mobile users cannot. However, we are rendering that component on every platform.We are e.g. rendering it in the report list, and thereby we are creating unnecessary renders. Even though it has no UI its connecting to onyx which is slightly blocking, and we want to avoid that:
What is the impact of this on end-users?
Especially on lower end devices we will gain a bit of our performance budget back making other important operations slightly faster.
List any benchmarks that show the severity of the issue
Using the react-devtools and profiling the app with the release bundle. We don't want to see render commits of unnecessary components like
UserDetailsTooltipProposed solution (if any)
Very simple:
UserDetailsTooltip/index.jstoUserDetailsTooltip/index.web.jsUserDetailsTooltip/index.js, which is just forwarding the childrenList any benchmarks after implementing the changes to show impacts of the proposed solution (if any)
Measure the app start again with
react-devtools, there now should be less commits.I applied the proposal and checked again. In the previous profile we had 75 commits, after the change it only were 69 and we can't find any rendering of the
UserDetailsTooltipPlatforms:
Which of our officially supported platforms is this issue occurring on?
Version Number: latest/main
Reproducible in staging?: yes
Reproducible in production?: yes
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:
View all open jobs on Upwork