Description

Fixed pendingConfirmationsSortedSelector to use proper memoization with createSelector. This selector was creating new arrays on every call, breaking memoization and triggering cascade re-renders throughout the confirmation flow and Routes components.

What is the reason for the change?
The selector was implemented as a plain function that returned new array references on every invocation (via .filter() and .sort()), causing unnecessary re-renders in all dependent components even when the underlying state hadn't changed.

What is the improvement/solution?
Wrapped the selector with createSelector from reselect to memoize the transformation. Now the selector only recalculates when getPendingApprovals returns a different reference, preventing cascade re-renders and improving performance across the confirmation flow.

Changelog

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

Related issues

Fixes: Part of P0 effort to break global re-render cascade (#6669)

Manual testing steps

1. This is a performance optimization with no visible UI changes
2. The memoization behavior is verified through unit tests
3. All existing confirmation flow functionality remains unchanged

Screenshots/Recordings

N/A - This is a performance optimization with no visual changes. The improvement is verified through unit tests that confirm the selector returns the same reference when state is unchanged.

Before

Selector created new arrays on every call, causing unnecessary re-renders:

export function pendingConfirmationsSortedSelector(state: ConfirmMetamaskState) {
  return getPendingApprovals(state)
    .filter(({ type }) => ConfirmationApprovalTypes.includes(type as ApprovalType))
    .sort((a1, a2) => a1.time - a2.time);
}

After

Selector uses memoization to return stable references:

export const pendingConfirmationsSortedSelector = createSelector(
  getPendingApprovals,
  (approvals) =>
    approvals
      .filter(({ type }) => ConfirmationApprovalTypes.includes(type as ApprovalType))
      .sort((a1, a2) => a1.time - a2.time),
);

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.

• Fixes MetaMask/MetaMask-planning#6674

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.