null/BillTracker
null
/
BillTracker
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 1 Wiki Activity

build(react): enable React Compiler (React 19 auto-memoization) (F2) 

Added babel-plugin-react-compiler to the Vite React plugin. The compiler
auto-memoizes components/hooks at build time, so manual useMemo/useCallback
become largely unnecessary going forward (existing ones are left in place —
harmless, and the compiler adds the rest). Safe here because the codebase is
rules-of-hooks clean (enforced by eslint-plugin-react-hooks).

Validated: production build succeeds and the e2e probe passes 17/17 with the
compiler on — every authed page renders axe-clean and Tracker/Summary/Analytics
reconciliation holds. (Build time ~2.2s -> ~6.2s from the compiler pass; the
runtime win is automatic memoization.) The compiler ESLint rule needs
eslint-plugin-react-hooks v6 — a future upgrade.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
null 2026-07-03 21:20:26 -05:00
parent a0a8579a08
commit 47c031f1e4
3 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -56,6 +56,7 @@
"@testing-library/react": "^16.3.2",
"@vitejs/plugin-react": "^4.3.3",
"autoprefixer": "^10.4.20",
"babel-plugin-react-compiler": "^1.0.0",
"concurrently": "^9.1.0",
"eslint": "^9.39.4",
"eslint-plugin-react-hooks": "^5.2.0",
@ -6488,6 +6489,16 @@
"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
}
},
"node_modules/babel-plugin-react-compiler": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz",
"integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/types": "^7.26.0"
}
},
"node_modules/balanced-match": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",

1
package.json
View File

@ -70,6 +70,7 @@
"@testing-library/react": "^16.3.2",
"@vitejs/plugin-react": "^4.3.3",
"autoprefixer": "^10.4.20",
"babel-plugin-react-compiler": "^1.0.0",
"concurrently": "^9.1.0",
"eslint": "^9.39.4",
"eslint-plugin-react-hooks": "^5.2.0",

9
vite.config.mjs
View File

@ -12,7 +12,14 @@ const apiPort = process.env.API_PORT || process.env.PORT || 3000;
export default defineConfig({
plugins: [
react(),
// React Compiler (React 19): auto-memoizes components/hooks at build time, so
// manual useMemo/useCallback become largely unnecessary. Safe here because the
// codebase is rules-of-hooks clean (enforced by eslint-plugin-react-hooks).
react({
babel: {
plugins: [['babel-plugin-react-compiler', {}]],
},
}),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['img/logo.png', 'img/pwa-192.png', 'img/pwa-512.png'],