Skip to content

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

Description

@rezkiy37

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?

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 (#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 (Expensify/eslint-config-expensify#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?

  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • 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 OwnerCurrent Issue Owner: @CortneyOfstad

Metadata

Metadata

Labels

Awaiting PaymentAuto-added when associated PR is deployed to productionBugSomething is broken. Auto assigns a BugZero manager.DailyKSv2EngineeringExternalAdded to denote the issue can be worked on by a contributor

Type

No type

Fields

No fields configured for issues without a type.

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions