fix: Prevent rerenders of the AccountListItem

[darkwing]

Description

The AccountListMenu has been been flagged as slow in the past, so I've memoized some selectors and child elements to make the menu render much, much less.

Related issues

Fixes:

Manual testing steps

1. Check out main branch
2. Start the extension with the ENABLE_WHY_DID_YOU_RENDER flag on
3. Open the Account List Menu
4. See loads of rerendering of the AccountListItem due to 4 props changing (onClick, closeMenu, etc)
5. Checkout this branch PR
6. Start the extension with the ENABLE_WHY_DID_YOU_RENDER flag on
7. Open the Account List Menu
8. See 0 re-renders of the AccountListItem

Screenshots/Recordings

Before

After

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 [0a679f6]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (1772 ± 40 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1638	1914	1770	78	38
		domContentLoaded	1601	1855	1721	59	29
		load	1639	1964	1772	84	40
		domInteractive	26	121	38	21	10
		backgroundConnect	13	201	53	49	24
		firstReactRender	15	69	32	21	10
		getState	6	100	24	26	13
		initialActions	0	1	0	0	0
		loadScripts	1200	1442	1306	59	28
		setupStore	8	60	26	21	10
		uiStartup	1818	2929	2079	262	126

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

• background: 0 Bytes (0.00%)
• ui: 125 Bytes (0.00%)
• common: 169 Bytes (0.00%)

[Prithpal-Sooriya]

Very nice work with the createSelector here!

[Prithpal-Sooriya]

(future) - can we add an equality check to prove that this is not creating a new array, and causing extra rerenders?

it('returns same result with exact same state', () => {
  const result1 = getInternalAccounts(state);
  const result2 = getInternalAccounts(state);
  expect(result1 === result2).toBe(true)
})

[metamaskbot]

Builds ready [214cea0]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (2051 ± 100 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1806	2426	2052	191	92
		domContentLoaded	1753	2281	1976	167	80
		load	1797	2508	2051	209	100
		domInteractive	22	79	36	13	6
		backgroundConnect	13	214	76	51	24
		firstReactRender	16	95	32	21	10
		getState	5	152	44	36	17
		initialActions	0	1	0	0	0
		loadScripts	1344	1747	1516	140	67
		setupStore	9	44	15	9	5
		uiStartup	1998	3710	2463	453	218

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

• background: 0 Bytes (0.00%)
• ui: 178 Bytes (0.00%)
• common: 169 Bytes (0.00%)

[metamaskbot]

Builds ready [dd2efdb]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (2185 ± 99 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	914	2595	2101	329	158
		domContentLoaded	1870	2595	2120	199	95
		load	1916	2601	2185	207	99
		domInteractive	28	206	60	43	21
		backgroundConnect	10	201	64	52	25
		firstReactRender	17	102	45	25	12
		getState	7	118	46	32	15
		initialActions	0	5	0	1	1
		loadScripts	1426	2072	1634	175	84
		setupStore	9	62	20	16	8
		uiStartup	2141	4065	2654	487	234

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

• background: 0 Bytes (0.00%)
• ui: 178 Bytes (0.00%)
• common: 169 Bytes (0.00%)