Context
The UI monorepo already has most of the prerequisites for React Compiler:
- React 19.1
eslint-plugin-react-hooks v7.1.1 (stable) with all compiler validation rules active (purity, immutability, refs, static-components, etc.) via reactHooks.configs.recommended.rules in eslint.config.js- Console, website, and design-system pass all compiler lint rules with zero violations
What's missing is the Babel transform itself (babel-plugin-react-compiler is not installed, and neither Vite config passes it to @vitejs/plugin-react).
Blocker: react-hook-form v7
react-hook-form v7's proxy-based formState is fundamentally incompatible with React Compiler's memoization. The compiler caches components that read formState.isValid/isSubmitting/isDirty because the form object reference is stable, so proxy mutations are invisible and the UI stops reacting (submit buttons stay disabled after valid input, etc.). This affects 14+ files in the console.
Migrating every formState read to useFormState({ control }) (a proper React hook the compiler can track) fixes the issue, but RHF v8 — currently in beta — is fully compiler-compatible out of the box (test report). We'll wait for v8 stable rather than patch around v7.
Proposal (once RHF v8 ships)
- Upgrade
react-hook-form to v8
- Install
babel-plugin-react-compiler
- Enable the transform in both Vite configs (
apps/console/vite.config.ts and apps/website/vite.config.ts)
After enabling, the ~142 manual useMemo/useCallback calls in console become no-ops — they can be removed incrementally without urgency.
Context
The UI monorepo already has most of the prerequisites for React Compiler:
eslint-plugin-react-hooksv7.1.1 (stable) with all compiler validation rules active (purity,immutability,refs,static-components, etc.) viareactHooks.configs.recommended.rulesineslint.config.jsWhat's missing is the Babel transform itself (
babel-plugin-react-compileris not installed, and neither Vite config passes it to@vitejs/plugin-react).Blocker: react-hook-form v7
react-hook-formv7's proxy-basedformStateis fundamentally incompatible with React Compiler's memoization. The compiler caches components that readformState.isValid/isSubmitting/isDirtybecause theformobject reference is stable, so proxy mutations are invisible and the UI stops reacting (submit buttons stay disabled after valid input, etc.). This affects 14+ files in the console.Migrating every
formStateread touseFormState({ control })(a proper React hook the compiler can track) fixes the issue, but RHF v8 — currently in beta — is fully compiler-compatible out of the box (test report). We'll wait for v8 stable rather than patch around v7.Proposal (once RHF v8 ships)
react-hook-formto v8babel-plugin-react-compilerapps/console/vite.config.tsandapps/website/vite.config.ts)After enabling, the ~142 manual
useMemo/useCallbackcalls in console become no-ops — they can be removed incrementally without urgency.