Description

MetaMetricsProvider Memoization Fix

The MetaMetricsProvider was creating unstable context references on every render by mutating a function to attach properties. This anti-pattern caused cascade re-renders across the application because:

1. Function mutation defeats React's reference equality checks - Properties were being dynamically added to trackEvent, creating a new reference each render
2. Provider wraps entire app - MetaMetricsProvider is at the root level, affecting all mounted consumer components
3. useLocation() triggers re-renders on every navigation - Combined with unstable references, every route change caused unnecessary re-renders of all mounted components consuming this context

This commit fixes the issue by replacing the function-with-properties pattern with a properly memoized object, ensuring stable references across renders.

useSegmentContext Memoization Fix

The useSegmentContext hook was returning new object references on every call, which broke the memoization chain in MetaMetricsProvider even after the primary fix:

Before: Every call created new objects

return {
  page,      // New object reference every render
  referrer,  // New object reference every render
};           // New object reference every render

After: Objects are memoized based on actual data changes

Cascade effect fixed:

1. useSegmentContext() now returns stable references
2. trackEvent callback in MetaMetricsProvider maintains stability
3. contextValue remains stable across route changes
4. All 149 consumers avoid unnecessary re-renders

Enables React Compiler

• Removes eslint-disable-next-line react-compiler/react-compiler directive from MetaMetricsProvider
• Provider can now be fully optimized by the compiler
• Stable context references enable React Compiler to skip re-renders of consumer components
• The new destructuring pattern is more amenable to compiler optimizations

TypeScript Conversions

This commit converts two files to TypeScript:

• Type safety: All context consumers now have proper type inference
• IDE support: Improved autocomplete and error detection for all 149 consumer components

Reviewer Guide: Core Changes vs Downstream Effects

Core Changes (Review Carefully)

These are the actual fixes that address the memoization issues:

Downstream Effects (Mechanical Updates)

These are necessary but mechanical changes resulting from the new context structure:

E2E Fix: StorageErrorToast

StorageErrorToast was missed in the original consumer updates. It used the old pattern of assigning the whole context value to trackEvent, then calling it as a function. With the new object-based context, this caused a TypeError during render—breaking the storage error toast E2E test.

Measured Impact

The memoization fix eliminates cascade re-renders, resulting in significant console warning reductions.

Unit and Integration Test Warning Reductions

What this means:

• Background connection warnings (-32%): Fewer unnecessary component re-mounts triggering background connection attempts
• Selector warnings (-38%): Stable context references mean selectors receive stable inputs, avoiding recalculations
• Production impact: Users should see reduced CPU usage and smoother interactions during navigation

Scope of Impact

149 components/hooks subscribe to MetaMetrics context:

Power User Impact

List item components subscribe to MetaMetrics context and are rendered once per item:

For power users with 100+ accounts, transactions, and assets, every navigation was triggering hundreds of unnecessary list item re-renders.

Changelog

CHANGELOG entry: Fixed MetaMetrics context causing cascade re-renders of 149 subscribers on every navigation

Related issues

• Fixes: https://github.com/MetaMask/MetaMask-planning/issues/6640
• Fixes: https://github.com/MetaMask/MetaMask-planning/issues/6826
• Fixes: https://github.com/MetaMask/MetaMask-planning/issues/6828
• Parent Epic: https://github.com/MetaMask/MetaMask-planning/issues/6503
• Related: https://github.com/MetaMask/MetaMask-planning/issues/6294

Screenshots/Recordings

Before

Every navigation triggered re-renders of all 149 mounted MetaMetrics context subscribers:

const trackEventWithMethods = trackEvent;
// eslint-disable-next-line react-compiler/react-compiler
trackEventWithMethods.bufferedTrace = bufferedTrace;
trackEventWithMethods.bufferedEndTrace = bufferedEndTrace;
trackEventWithMethods.onboardingParentContext = onboardingParentContext;

After

Context value is properly memoized with full TypeScript support:

const contextValue = useMemo(
  () => ({
    trackEvent,
    bufferedTrace,
    bufferedEndTrace,
    onboardingParentContext,
  }),
  [trackEvent, bufferedTrace, bufferedEndTrace],
);

Summary of 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.