Audit the 19 `useSelector` reads on Wallet home for expensive and unstable selectors

[MajorLift]

Performance audit finding · Severity: Medium Ruled out · Resolution: closed after per-selector triage
File: app/components/Views/Wallet/index.tsx

Audit result (2026-06-10)

All 19 useSelector reads triaged; no expensive or unstable selector found:

• 16 are memoized selectors returning primitives/booleans (feature flags, chain id, unread count) or stable controller-state references (the engine slice replaces only the changed controller's key per 250ms batched flush; BaseController v2 state is Immer-produced with structural sharing, so unchanged paths keep their references).
• 3 are inline useSelector arrows returning primitives or a stable slice field (state.security.dataCollectionForMarketing, state.settings.basicFunctionalityEnabled, state.networkOnboarded.networkOnboardedState). A new arrow function per render is irrelevant to re-rendering — only the result identity matters — so these are reuse/style debt, not perf findings. Optional cleanup: promote to named selectors per app/selectors/ convention; no perf issue warranted.

Original finding (superseded by the audit above)

The Wallet home screen makes 19 separate useSelector calls; each was triaged for per-check cost and reference stability under the batched-sync dispatch cadence (app/core/Batcher/constants.ts 250ms flush, app/core/EngineService/EngineService.ts:38 unstable_batchedUpdates) and ruled out.

References

• Batching evidence: app/core/Batcher/constants.ts, app/core/EngineService/EngineService.ts:38
• Source: mms-performance sweep + per-selector triage (perf: Augment mms-performance with frontend learnings from the Extension performance audit skills#49, mm-state-normalization)
• Status: RULED OUT (static triage)

[metamask-ci]

Triage Agent -- Classification

Severity: Sev3 (confidence: 0.88) ✅

This is a performance optimization issue, not a functional bug. The app works correctly but has suboptimal Redux subscription patterns on the home screen. Users may experience minor jank or unnecessary re-renders from background dispatches, but there's no broken functionality, data loss, or crash. It's a UX annoyance affecting performance-sensitive scenarios.

Size: size-M (confidence: 0.82) ⚠️ Advisory

The fix requires: (1) auditing all useSelector calls in the Wallet home screen and its immediate children, (2) creating consolidated memoized view selectors that group related state reads, (3) pushing some selectors down into child components that actually consume the data, (4) potentially creating new selector files or extending existing ones with createDeepEqualSelector. This touches multiple files (selectors, the home/wallet view, possibly child section components) and requires careful testing to ensure no regressions in re-render behavior.
Not auto-applied -- confidence below threshold.

Team: team-mobile-platform ✅

Matched via area fallback: area-performance (no CODEOWNERS match)

---

Root Cause Analysis

Affected component: Wallet home screen (likely app/components/Views/Wallet/WalletView or the parent that renders Homepage.tsx)

The issue is in the Wallet home screen component (the parent that renders Homepage), not Homepage.tsx itself. Looking at Homepage.tsx, it has only ~5 useSelector calls (selectPerpsEnabledFlag, selectPredictEnabledFlag, selectDeFiPositionsSectionEnabled, selectSocialLeaderboardEnabled, selectIsMusdConversionFlowEnabledFlag). The reported 19 useSelector calls are likely in the WalletView component that wraps Homepage, or spread across WalletView + Homepage combined. Each useSelector creates an independent subscription to the Redux store. On every Redux dispatch (which happens frequently due to background polling for balances, token rates, currency rates, network status), all 19 subscription callbacks fire and run equality checks. When selectors return fresh object references (common with non-memoized or poorly memoized selectors), React triggers unnecessary re-renders of the always-mounted home screen, cascading down the component tree.

Evidence:

• Issue title explicitly states 'Wallet home runs 19 useSelector subscriptions'
• Homepage.tsx has 5 useSelector calls visible in the provided code, suggesting the remaining ~14 are in the parent WalletView or sibling components
• The codebase uses both createSelector and createDeepEqualSelector, indicating awareness of reference equality issues but inconsistent application
• Background controllers (AccountTrackerController, CurrencyRateController, TokenRatesController, TokenBalancesController) frequently update state, triggering dispatches
• The issue description mentions 'balance polls, rate updates, controller syncs' as trigger sources

Suggested Fix

Confidence: medium: likely but needs investigation - the exact WalletView file is not in the KB context, so the full list of 19 useSelector calls needs to be identified first. The approach is well-established React/Redux optimization pattern.

Consolidate the 19 useSelector calls into a few grouped memoized view selectors, and push reads that only feed subsections down into those subsections. Create composite selectors using createDeepEqualSelector that return a single object grouping related state, reducing the number of subscriptions and equality checks.

Target files: app/components/Views/Homepage/Homepage.tsx, app/selectors/networkController.ts, app/selectors/preferencesController.ts
Target functions: Homepage (forwardRef component), WalletView (parent component - file path not in KB, likely app/components/Views/Wallet/WalletView.tsx)

Approach:

1. Audit: Find the Wallet home screen component (likely app/components/Views/Wallet/WalletView.tsx or similar) and catalog all 19 useSelector calls. Group them by purpose: (a) feature flags, (b) network/chain state, (c) account state, (d) UI preferences.

2. Create composite view selectors: In a new file like app/selectors/walletHomeSelectors.ts, create grouped selectors using createDeepEqualSelector:

   • selectHomeFeatureFlags → combines perps, predict, DeFi, social leaderboard, mUSD flags into one object
   • selectHomeNetworkState → combines chain ID, provider config, network status into one object
   • selectHomeAccountState → combines selected account, balances into one object

3. Replace multiple useSelector calls: In the Wallet home component, replace const isPerpsEnabled = useSelector(selectPerpsEnabledFlag); const isPredictEnabled = useSelector(selectPredictEnabledFlag); ... with a single const { isPerpsEnabled, isPredictEnabled, ... } = useSelector(selectHomeFeatureFlags);

4. Push reads down: Identify selectors whose values are only passed as props to a single child section. Move those useSelector calls into the child component instead. For example, if a selector value only feeds NFTsSection, move it inside NFTsSection.

5. Use shallowEqual: For composite selectors returning flat objects with primitive values, use useSelector(selector, shallowEqual) from react-redux to avoid re-renders when individual values haven't changed.

6. Test: Verify with React DevTools Profiler that the home screen re-render count drops significantly during background polling cycles.

---

Confidence threshold: 0.85. Labels marked ✅ were auto-applied. Labels marked ⚠️ are advisory only (below threshold).
To re-triage, remove the ta-bot-triage label and re-apply ta-needs-triage.
⚠️ Some dimensions could not be confidently classified. An engineer should review this issue.