fix: Improve AccountListMenu/Item performance

[owencraston]

Description

1. What is the reason for the change?

• reduce unnecessary re renders of the AccountsListMenu and AccountsListItem component
• reduce tech debt
• adopt better patterns like memoizing callbacks, lifting state to parent components and memoizing smaller components

2. What is the improvement/solution?

• memoize AccountsListItem

• remove getSelectedInternalAccount form AccountsListItem since this component already has a prop called selected that uses the same logic. Lifting this state to the parent means that the AccountsListItem will not need to re render. Also a change in the getSelectedInternalAccount would trigger a re render of all its parents which is unnecessary.

  • This prop is now required to make up for the fact that we don't have the state anymore

• memoize callbacks in the AccountListMenu

• This PR has minor changes and should not effect any user flows. It does not require QA before merging

Related issues

Fixes: https://github.com/MetaMask/accounts-planning/issues/512

Manual testing steps

• import / create a wallet
• create as many accounts as you can
• each time you create an account, the new account should be selected
• open the account menu and select a new account, the account should become globally selected
• select an account, click the three dots beside it, go to account details, click on view private key, put password, the private key should be displayed

Screenshots/Recordings

Before

After

Screen.Recording.2024-08-14.at.12.13.19.PM.1080.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

Builds ready [dfcd369]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (374 ± 343 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	69	161	106	22	11
		domContentLoaded	11	55	29	14	7
		load	54	2284	374	715	343
		domInteractive	11	55	29	14	7

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 0 Bytes (0.00%)
• ui: 157 Bytes (0.00%)
• common: 79 Bytes (0.00%)

[codecov]

Codecov Report

Attention: Patch coverage is 71.42857% with 4 lines in your changes missing coverage. Please review.

Project coverage is 69.99%. Comparing base (bef5b8f) to head (110a229).
Report is 8 commits behind head on develop.

Files	Patch %	Lines
...multichain/account-list-menu/account-list-menu.tsx	62.50%	3 Missing ⚠️
...ultichain/pages/send/components/account-picker.tsx	66.67%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #26379      +/-   ##
===========================================
+ Coverage    69.97%   69.99%   +0.01%     
===========================================
  Files         1422     1422              
  Lines        49938    49929       -9     
  Branches     13861    13859       -2     
===========================================
+ Hits         34943    34944       +1     
+ Misses       14995    14985      -10     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[metamaskbot]

Builds ready [110a229]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (255 ± 269 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	64	263	112	48	23
		domContentLoaded	10	130	28	26	13
		load	43	2095	255	561	269
		domInteractive	10	130	28	27	13

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 157 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[k-g-j]

I think that increasing the use of memoization and callbacks is good practice. I found the app to be efficient and not have any lagging when working with 10+ accounts.

Screen.Recording.2024-08-15.at.10.27.50.AM.mov