build: Enable React Compiler for Browserify builds, fix react-compiler/react-compiler ESLint rule violations (#37480)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## Motivation

This commit enables React Compiler for Babel-transformed Browserify
builds, and for ESLint (via the `react-compiler/react-compiler`
ruleset). We can expect long-term UI performance benefits and developer
time savings from this change. The Compiler transparently adds
memoization code for React components and hooks, among other
optimizations, and enforces React best practices.

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Because enabling React Compiler requires addressing all violations of
the `react-compiler/react-compiler` rule, this commit contains a large
number of formatting changes and renames that do not require close
review, alongside refactors and logical changes that do.

I would suggest that reviewers primarily focus on whether a given change
is problematic, rather than on whether it is necessary. If the
motivation for any change is unclear, it's safe to assume that it fixes
an error thrown in CI. The objective of this commit is to ship fixes
that unblock React Compiler without introducing regressions in
functionality or performance. Suggestions on implementing React best
practices will be catalogued and addressed in follow-up tickets.

The 10% bundle size increase is due to new memoizations being applied as
React Compiler transforms files during the build process, which is the
tradeoff for improvements in runtime interaction and responsiveness
metrics. Despite this change, the UI startup and pageLoad benchmark
results show no evidence of degradations in initial load time.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37480?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null (non-user facing but regressions possible)

## **Related issues**

- Epic: #33059
- Previous: #37383
- Next: #38007

## **Manual testing steps**

1. Create a Browserify dev build by running `yarn start`.
2. Inspect `./dist/(chrome|firefox)/ui-[3-17].js`.
3. Search for "`_reactCompilerRuntime.c`".
4. There should be many examples of React Compiler-optimized code that
uses a `$` variable e.g.
```js
  const $ = (0, _reactCompilerRuntime.c)(22);
  const {
    pathname
  } = (0, _reactRouterDomV5Compat.useLocation)();
  const dispatch = (0, _reactRedux.useDispatch)();
  const t = (0, _useI18nContext.useI18nContext)();
  let t0;
  if ($[0] !== pathname) {
    t0 = (0, _snaps2.decodeSnapIdFromPathname)(pathname);
    $[0] = pathname;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.














<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Enables React Compiler in Browserify Babel builds and enforces the
react-compiler ESLint rule, with broad hook/memoization refactors,
selector renames, tests updates, and dependency/policy changes.
> 
> - **Build/Tooling**:
> - Enable React Compiler via Babel override for
`ui/**/{components,contexts,hooks,layouts,pages}` with
`babel-plugin-react-compiler` (target 17).
> - Add `react-compiler-runtime` and `babel-plugin-react-compiler` deps;
update `esbuild`, `koa` (v3), and related tooling.
> - Enforce `react-compiler/react-compiler` ESLint rule and plugin
across JS/TS React configs.
> - **Policies/Config**:
> - Extend LavaMoat policies and depcheck ignores for React Compiler
packages and updated sub-deps.
> - **UI/Hook Refactors (compliance + perf)**:
> - Replace patterns violating React Compiler (e.g., `useMemo` state
updates, unstable callbacks, missing keys) with
`useCallback`/`useRef`/guards; fix array checks, keys, debounce
handling, and effect deps.
> - Improve polling hooks (`usePolling`, `useMultiPolling`) with input
change detection and cleanup; stabilize navigation and debounce
handlers.
> - Add `isNativeAsset` and use in `AssetPage`; compute asset balances
immutably.
> - **Reliability/Null Safety**:
> - Guard optional `request?.metadata?.id` across confirmations/snaps
flows; miscellaneous null-safe checks.
> - **Selectors/Types**:
> - Rename selectors: `useSafeChainsListValidationSelector` →
`getUseSafeChainsListValidation`; `use4ByteResolutionSelector` →
`getUse4ByteResolution` (and propagate).
> - Tighten types (e.g., `ownerId` optional handling, asset type
helpers).
> - **Tests**:
> - Update tests to use `renderHook` for hooks; adjust mocks to renamed
selectors and new patterns.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
c47e3f6. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: MetaMask Bot <[email protected]>

Author: MajorLift

.depcheckrc.yml

@@ -8,6 +8,7 @@ ignores:
   - '@lavamoat/webpack'
   - '@lavamoat/allow-scripts'
   - '@babel/runtime'
+  - 'react-compiler-runtime'
   - '@fortawesome/fontawesome-free'
   - 'punycode'
   # injected via build system
@@ -83,6 +84,7 @@ ignores:
   - 'core-js-pure' # polyfills
   # babel
   - '@babel/plugin-transform-logical-assignment-operators'
+  - 'babel-plugin-react-compiler'
   # used in image optimization script
   - 'sharp'
   # trezor

.eslintrc.js

@@ -320,8 +320,9 @@ module.exports = {
           jsx: true,
         },
       },
-      plugins: ['react'],
+      plugins: ['react', 'react-compiler'],
       rules: {
+        'react-compiler/react-compiler': 'error',
         'react/no-unused-prop-types': 'error',
         'react/no-unused-state': 'error',
         'react/jsx-boolean-value': 'error',
@@ -362,8 +363,9 @@ module.exports = {
           jsx: true,
         },
       },
-      plugins: ['react'],
+      plugins: ['react', 'react-compiler'],
       rules: {
+        'react-compiler/react-compiler': 'error',
         'react/no-unused-prop-types': 'warn',
         'react/no-unused-state': 'warn',
         'react/jsx-boolean-value': 'off',

babel.config.js

@@ -2,13 +2,23 @@ const path = require('path');
 
 module.exports = function (api) {
   api.cache(false);
+  const slash = `\\${path.sep}`;
   return {
     parserOpts: {
       strictMode: true,
     },
     targets: {
       browsers: ['chrome >= 89', 'firefox >= 89'],
     },
+    overrides: [
+      {
+        test: new RegExp(
+          `^${path.join(__dirname, 'ui')}${slash}(?:components|contexts|hooks|layouts|pages)${slash}(?:.(?!\\.(?:test|stories|container)))+\\.(?:m?[jt]s|[jt]sx)$`,
+          'u',
+        ),
+        plugins: [['babel-plugin-react-compiler', { target: '17' }]],
+      },
+    ],
     plugins: [
       // `browserify` is old and busted, and doesn't support `??=` (and other
       // logical assignment operators). This plugin lets us target es2020-level