[HOLD for payment 2024-12-17] [HOLD for payment 2024-12-16] [$250] [Performance] Use initializer callbacks for useState

[rezkiy37]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

What performance issue do we need to solve?

e.g. memory consumption, storage read/write times, React native bridge concerns, inefficient React component rendering, etc.

Inefficient React component re-rendering and useState usage.

What is the impact of this on end-users?

List specific user experiences that will be improved by solving this problem e.g. app boot time, time to for some interaction to complete, etc.

This optimization reduces the render time.

List any benchmarks that show the severity of the issue

Please also provide exact steps taken to collect metrics above if any so we can independently verify the results.

Proposed solution (if any)

Please list out the steps you think we should take to solve this issue.

Pass an initializer callback to the useState hook instead of immediately calling functions. This ensures the callback is only executed once during the initial render. There is an issue (https://github.com/Expensify/App/issues/53162) that they only fixed for BottomTabBar (https://github.com/callstack-internal/expensify-issues/issues/165).

As a part of the improvement, we need to integrate an Eslint rule (https://github.com/Expensify/eslint-config-expensify/pull/138) to confirm if we will do it properly.

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

Note: These should be the same as the benchmarks collected before any changes.

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [x] Android: Native
• [x] Android: mWeb Chrome
• [x] iOS: Native
• [x] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Version Number: 9.0.68-3 Reproducible in staging?: yes Reproducible in production?: yes Email or phone of affected tester (no customers): N/A Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation Expensify/Expensify Issue URL: N/A Issue reported by: @rezkiy37 Slack conversation: N/A

View all open jobs on Upwork

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863577701857268791
• Upwork Job ID: 1863577701857268791
• Last Price Increase: 2024-12-02

Issue Owner

Current Issue Owner: @CortneyOfstad

[rezkiy37]

Hi, I am Michael (Mykhailo) from Callstack, an expert agency and I can work on this issue.

*I forgot to post it 🙂

[melvin-bot[bot]]

Triggered auto assignment to @CortneyOfstad (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.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[rezkiy37]

I am preparing one more PR (https://github.com/Expensify/App/pull/53568).

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.72-1 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/53323

If no regressions arise, payment will be issued on 2024-12-16. :confetti_ball:

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

• @rezkiy37 does not require payment (Contractor)
• @alitoshmatov requires payment through NewDot Manual Requests
• @rezkiy37 does not require payment (Contractor)

[melvin-bot[bot]]

@alitoshmatov @CortneyOfstad @alitoshmatov The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[CortneyOfstad]

@alitoshmatov can you complete the checklist when you have a moment? No rush as we have some time before Dec. 16 👍

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.73-8 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/53568

If no regressions arise, payment will be issued on 2024-12-17. :confetti_ball:

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

• @rezkiy37 does not require payment (Contractor)
• @alitoshmatov requires payment through NewDot Manual Requests
• @rezkiy37 does not require payment (Contractor)

[melvin-bot[bot]]

@alitoshmatov @CortneyOfstad @alitoshmatov The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[alitoshmatov]

BugZero Checklist:

• [x] [Contributor] Classify the bug:

Bug classification

Source of bug:

• [ ] 1a. Result of the original design (eg. a case wasn't considered)
• [ ] 1b. Mistake during implementation
• [ ] 1c. Backend bug
• [x] 1z. Other: Performance improvement

Where bug was reported:

• [ ] 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• [ ] 2b. Reported on staging (eg. found during regression or PR testing)
• [ ] 2d. Reported on a PR
• [x] 2z. Other: Not a bug, performance improvement

Who reported the bug:

• [ ] 3a. Expensify user
• [x] 3b. Expensify employee
• [ ] 3c. Contributor
• [ ] 3d. QA
• [ ] 3z. Other:

• [x] [Contributor] 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: No offending PR, general clean up to enforce new eslint rule

• [x] [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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: No discussion

• [x] [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

No regression test

[melvin-bot[bot]]

Payment Summary

Upwork Job

• Contributor: @rezkiy37 is from an agency-contributor and not due payment
• Reviewer: @alitoshmatov owed $250 via NewDot

BugZero Checklist (@CortneyOfstad)

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

[CortneyOfstad]

Payment Summary

@alitoshmatov — to be paid $250 via NewDot @rezkiy37 — contracted position

Regression Test

Checklist indicated no test needed here

[JmillsExpensify]

$250 approved for @alitoshmatov