React Compiler (#5562)

* Highlight first suggestion when searching instead of the split option

* Fix error

* Try out react compiler

* Fix typecheck errors

* Increase --max-old-space-size

* Increate --max-old-space-size in package-browser

* Update config and versions

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes (attempt 2/3)

* Update versions

* Fix typecheck errors

* Revert some changes

* Implement react compiler to take advantage of some performance improvements

* Fixes

* Remove unused packages

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

bin/package-browser

@@ -14,6 +14,8 @@ git pull
 popd > /dev/null
 packages/desktop-client/bin/remove-untranslated-languages
 
+export NODE_OPTIONS="--max-old-space-size=4096"
+
 yarn workspace loot-core build:browser
 yarn workspace @actual-app/web build:browser
 

bin/package-electron

@@ -39,6 +39,8 @@ git pull
 popd > /dev/null
 packages/desktop-client/bin/remove-untranslated-languages
 
+export NODE_OPTIONS="--max-old-space-size=4096"
+
 yarn workspace loot-core build:node
 yarn workspace @actual-app/web build --mode=desktop # electron specific build
 

eslint.config.mjs

@@ -154,9 +154,6 @@ export default pluginTypescript.config(
   {
     plugins: {
       actual: pluginActual,
-      'react-hooks': pluginReactHooks,
-      'jsx-a11y': pluginJSXA11y,
-      'typescript-paths': pluginTypescriptPaths,
     },
     rules: {
       'actual/no-untranslated-strings': 'error',
@@ -165,6 +162,10 @@ export default pluginTypescript.config(
   },
   {
     files: ['**/*.{js,ts,jsx,tsx}'],
+    plugins: {
+      'jsx-a11y': pluginJSXA11y,
+      'react-hooks': pluginReactHooks,
+    },
     rules: {
       // http://eslint.org/docs/rules/
       'array-callback-return': 'warn',
@@ -630,6 +631,9 @@ export default pluginTypescript.config(
   },
   {
     files: ['packages/desktop-client/**/*.{js,ts,jsx,tsx}'],
+    plugins: {
+      'typescript-paths': pluginTypescriptPaths,
+    },
     rules: {
       'typescript-paths/absolute-parent-import': [
         'error',

package.json

@@ -57,15 +57,15 @@
     "@octokit/rest": "^22.0.0",
     "@types/node": "^22.17.0",
     "@types/prompts": "^2.4.9",
-    "@typescript-eslint/parser": "^8.32.1",
+    "@typescript-eslint/parser": "^8.42.0",
     "cross-env": "^7.0.3",
-    "eslint": "^9.27.0",
+    "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-import-resolver-typescript": "^4.3.5",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^6.0.0-rc.2",
     "eslint-plugin-typescript-paths": "^0.0.33",
     "globals": "^15.15.0",
     "html-to-image": "^1.11.13",
@@ -80,7 +80,7 @@
     "source-map-support": "^0.5.21",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.32.1",
+    "typescript-eslint": "^8.42.0",
     "typescript-strict-plugin": "^2.4.4"
   },
   "resolutions": {

packages/component-library/package.json

@@ -13,9 +13,9 @@
   },
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
-    "@types/react": "^19.1.4",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "@types/react": "^19.1.12",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "vitest": "^3.2.4"
   },
   "exports": {

packages/desktop-client/package.json

@@ -14,7 +14,6 @@
     "@rollup/plugin-inject": "^5.0.5",
     "@swc/core": "^1.11.24",
     "@swc/helpers": "^0.5.17",
-    "@swc/plugin-react-remove-properties": "^1.5.121",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "16.3.0",
@@ -22,14 +21,15 @@
     "@types/debounce": "^1.2.4",
     "@types/lodash": "^4",
     "@types/promise-retry": "^1.1.6",
-    "@types/react": "^19.1.4",
-    "@types/react-dom": "^19.1.5",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "@types/react-grid-layout": "^1",
     "@types/react-modal": "^3.16.3",
     "@use-gesture/react": "^10.3.1",
     "@vitejs/plugin-basic-ssl": "^1.2.0",
-    "@vitejs/plugin-react-swc": "^3.6.0",
+    "@vitejs/plugin-react": "^5.0.2",
     "auto-text-size": "^0.2.3",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "chokidar": "^3.6.0",
     "cmdk": "^1.1.1",
     "cross-env": "^7.0.3",
@@ -50,12 +50,12 @@
     "promise-retry": "^2.0.1",
     "prop-types": "^15.8.1",
     "re-resizable": "^6.11.2",
-    "react": "19.1.0",
+    "react": "19.1.1",
     "react-aria": "^3.39.0",
     "react-aria-components": "^1.8.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "19.1.0",
+    "react-dom": "19.1.1",
     "react-error-boundary": "^5.0.0",
     "react-grid-layout": "^1.5.1",
     "react-hotkeys-hook": "^4.6.2",
@@ -74,7 +74,6 @@
     "remark-gfm": "^4.0.1",
     "rollup-plugin-visualizer": "^5.14.0",
     "sass": "^1.89.0",
-    "swc-loader": "^0.2.6",
     "usehooks-ts": "^3.1.1",
     "uuid": "^11.1.0",
     "vite": "^6.3.6",

packages/desktop-client/src/components/modals/CreateLocalAccountModal.tsx

@@ -25,7 +25,7 @@ import {
 } from '@desktop-client/components/common/Modal';
 import { Checkbox } from '@desktop-client/components/forms';
 import { validateAccountName } from '@desktop-client/components/util/accountValidation';
-import * as useAccounts from '@desktop-client/hooks/useAccounts';
+import { useAccounts } from '@desktop-client/hooks/useAccounts';
 import { useNavigate } from '@desktop-client/hooks/useNavigate';
 import { closeModal } from '@desktop-client/modals/modalsSlice';
 import { useDispatch } from '@desktop-client/redux';
@@ -34,7 +34,7 @@ export function CreateLocalAccountModal() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const dispatch = useDispatch();
-  const accounts = useAccounts.useAccounts();
+  const accounts = useAccounts();
   const [name, setName] = useState('');
   const [offbudget, setOffbudget] = useState(false);
   const [balance, setBalance] = useState('0');

packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx

@@ -1,4 +1,4 @@
-import React, { type CSSProperties } from 'react';
+import React, { type SVGAttributes, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { AlignedText } from '@actual-app/components/aligned-text';
@@ -140,7 +140,8 @@ const customLabel = ({
   const calcY =
     (typeof props.y === 'number' ? props.y : 0) -
     ((typeof props.value === 'number' ? props.value : 0) > 0 ? 10 : -10);
-  const textAnchor = props.index === 0 ? 'left' : 'middle';
+  const textAnchor: SVGAttributes<SVGTextElement>['textAnchor'] =
+    props.index === 0 ? 'start' : 'middle';
   const display =
     typeof props.value !== 'string' && props.value !== 0
       ? `${format(props.value || 0, 'financial-no-decimals')}`

packages/desktop-client/src/components/reports/graphs/renderCustomLabel.tsx

@@ -1,19 +1,19 @@
 // @ts-strict-ignore
-import React from 'react';
+import React, { type SVGAttributes } from 'react';
 
 import { theme } from '@actual-app/components/theme';
 
 import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter';
 
 export const renderCustomLabel = (
-  calcX: number,
-  calcY: number,
-  textAnchor: string,
+  calcX: SVGAttributes<SVGTextElement>['x'],
+  calcY: SVGAttributes<SVGTextElement>['y'],
+  textAnchor: SVGAttributes<SVGTextElement>['textAnchor'],
   display: string,
-  textSize?: string,
+  textSize?: SVGAttributes<SVGTextElement>['fontSize'],
   showLabel?: number,
   showLabelThreshold?: number,
-  fill: string = theme.pageText,
+  fill: SVGAttributes<SVGTextElement>['fill'] = theme.pageText,
 ) => {
   return !showLabel || Math.abs(showLabel) > showLabelThreshold ? (
     <text

packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx

@@ -1,4 +1,9 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, {
+  useState,
+  useMemo,
+  useCallback,
+  type SVGAttributes,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { theme } from '@actual-app/components/theme';
@@ -57,7 +62,10 @@ function CustomLabel({
     left: -valueLengthOffset + 2,
   };
 
-  const anchorValue = {
+  const anchorValue: {
+    right: SVGAttributes<SVGTextElement>['textAnchor'];
+    left: SVGAttributes<SVGTextElement>['textAnchor'];
+  } = {
     right: 'start',
     left: 'end',
   };

packages/desktop-client/src/components/tags/TagCreationRow.tsx

@@ -21,6 +21,7 @@ import {
   Row,
   useTableNavigator,
 } from '@desktop-client/components/table';
+import { useInitialMount } from '@desktop-client/hooks/useInitialMount';
 import { useProperFocus } from '@desktop-client/hooks/useProperFocus';
 import { useTagCSS } from '@desktop-client/hooks/useTagCSS';
 import { useDispatch } from '@desktop-client/redux';
@@ -81,8 +82,13 @@ export const TagCreationRow = ({ onClose, tags }: TagCreationRowProps) => {
     resetInputs();
   };
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => tableNavigator.onEdit('new-tag', 'tag'), []);
+  const isInitialMount = useInitialMount();
+
+  useEffect(() => {
+    if (isInitialMount) {
+      tableNavigator.onEdit('new-tag', 'tag');
+    }
+  }, [isInitialMount, tableNavigator]);
 
   return (
     <View

packages/desktop-client/vite.config.mts

@@ -3,12 +3,13 @@ import * as path from 'path';
 
 import inject from '@rollup/plugin-inject';
 import basicSsl from '@vitejs/plugin-basic-ssl';
-import react from '@vitejs/plugin-react-swc';
+import react from '@vitejs/plugin-react';
 import { visualizer } from 'rollup-plugin-visualizer';
 /// <reference types="vitest" />
 import { defineConfig, loadEnv, Plugin } from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
+import reactCompiler from 'babel-plugin-react-compiler';
 
 const addWatchers = (): Plugin => ({
   name: 'add-watchers',
@@ -177,13 +178,9 @@ export default defineConfig(async ({ mode }) => {
       injectShims(),
       addWatchers(),
       react({
-        plugins: [
-          [
-            '@swc/plugin-react-remove-properties',
-            { properties: ['^data-debug'] },
-          ],
-        ],
-        devTarget: 'es2022',
+        babel: {
+          plugins: [reactCompiler],
+        },
       }),
       viteTsconfigPaths({ root: '../..' }),
       visualizer({ template: 'raw-data' }),

packages/loot-core/typings/window.ts

@@ -49,8 +49,7 @@ declare global {
     __navigate?: import('react-router').NavigateFunction;
   }
 
-  // eslint-disable-next-line no-var
   var Actual: Actual;
-  // eslint-disable-next-line no-var
+
   var IS_TESTING: boolean;
 }

upcoming-release-notes/5562.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Implement react compiler to take advantage of some performance improvements