[$250] [LOW] [Performance] Memoize the bottom tab component

[mountiny]

Coming from Slack here

Problem

BottomTabBar re-renders a few times because of the parent component. It takes pretty much a time to update around 60ms on each re-render.

Solution

Use React.memo for the component to re-render only when necessary. Before: 253ms (all rerenders, 5) / After: 105ms around 141% of improvement. A commit is here. I am attaching screenshots with the legacy (the 1st) and updated (the 2nd) versions.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c88d87fb5aadb399
• Upwork Job ID: 1800546469089470578
• Last Price Increase: 2024-06-11
• Automatic offers:
• akinwale | Reviewer | 102689897

Issue Owner

Current Issue Owner: @akinwale

[melvin-bot[bot]]

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

[mountiny]

@rezkiy37 will handle it

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[rezkiy37]

Hi, I’m Michael (Mykhailo) from Callstack and I would like to work on this issue.

[melvin-bot[bot]]

📣 @akinwale 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[rezkiy37]

I've opened a PR - https://github.com/Expensify/App/pull/43495.