fix: Perf: Prevent MultipleNotifications rerenders

[darkwing]

Description

The MultipleNotifications component rerenders on a non-matching array of null values. This prevents that issue.

Related issues

Fixes:

Manual testing steps

1. Go to this page...

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 [52da8c7]

• 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
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1795 ± 93 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	292	2138	1630	479	230
		domContentLoaded	1501	2118	1764	193	92
		load	1510	2136	1795	193	93
		domInteractive	25	108	45	24	11
		backgroundConnect	9	73	34	25	12
		firstReactRender	15	74	37	24	11
		getState	4	58	21	19	9
		initialActions	0	0	0	0	0
		loadScripts	1090	1544	1293	158	76
		setupStore	7	28	11	4	2
		uiStartup	1645	2474	2041	234	113

Bundle size diffs

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

[Prithpal-Sooriya]

Hmmm I need to do some reading, but now that this is an array of JSX elements, shouldn't we give these a key field to ensure that React effectively manages (reconciles) items in this list?

[darkwing]

@Prithpal-Sooriya Added keys! Good shout!

[metamaskbot]

Builds ready [7b12df4]

• 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
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1694 ± 69 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1487	2150	1693	145	70
		domContentLoaded	1468	2127	1666	147	70
		load	1487	2147	1694	144	69
		domInteractive	15	72	32	10	5
		backgroundConnect	11	68	34	20	10
		firstReactRender	15	71	37	23	11
		getState	5	58	16	16	8
		initialActions	0	1	0	0	0
		loadScripts	1083	1536	1227	110	53
		setupStore	8	62	17	18	9
		uiStartup	1726	2406	1920	153	74

Bundle size diffs

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