Description

getPendingApprovals was creating a new array on every call via Object.values(), breaking memoization in the Routes component and triggering cascade re-renders across ~50-60 child components on every state change.

Changes:

• Wrapped getPendingApprovals in createSelector to memoize the Object.values() transformation
• Added helper function getPendingApprovalsObject to extract the pendingApprovals object
• Returns stable reference when underlying pendingApprovals object is unchanged

Implementation:

// Before: new array every call
export function getPendingApprovals(state: ApprovalsMetaMaskState) {
  return Object.values(state.metamask.pendingApprovals ?? {});
}

// After: memoized transformation
const getPendingApprovalsObject = (state: ApprovalsMetaMaskState) =>
  state.metamask.pendingApprovals ?? {};

export const getPendingApprovals = createSelector(
  getPendingApprovalsObject,
  (approvals) => Object.values(approvals),
);

Testing:

• Added unit tests verifying reference equality on repeated calls with identical state
• Tests verify invalidation when pendingApprovals actually change
• All existing tests pass (664 selector tests across 31 suites)
• Covers edge cases (empty object, null/undefined values)

Changelog

CHANGELOG entry: Fixed critical performance issue slowing down all user actions by fixing approvals selector memoization

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/6673

• Part of #6669 — Break Global Re-render Cascade

Manual testing steps

1. Open MetaMask extension
2. Navigate to any page that triggers state changes (e.g., switching networks, accounts)
3. Observe improved responsiveness compared to before (Routes component and children no longer re-render unnecessarily)
4. Verify approvals functionality works correctly (no behavioral changes)

Screenshots/Recordings

Before

N/A - Performance improvement (internal optimization, no UI changes)

After

N/A - Performance improvement (internal optimization, no UI changes)

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.