Description

When exploring the extension performance, I spotted that the getSelectedAccount selector that was introduced for Multichain was returning a new object, thus the new object reference causing unnecessary re-renders of components using it. The top-most UI component, routes.container.js, was using this selector, which could cause a significant UI perf impact. This PR memoizes that result, ensuring routes.container.js doesn't make unnecessary re-renders.

Related issues

Fixes: N/A

Manual testing steps

BEFORE CHECKING OUT THIS PR, open routes.component.js and add the following in componentDidUpdate:

console.log('[routes.component.js] componentDidUpdate ---------------------------');
    const keyz = Object.keys(this.props);
    keyz.forEach((key) => {
      if (this.props[key] !== prevProps[key]) {
        console.warn('[prop value inequality]: ', key, this.props[key], prevProps[key]);
      }
    });

See that the account property displays in this list. This means an unnecessary update is happening.

After checking out this PR, that key should not display in the warning.

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I’ve followed MetaMask 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.