Performance: Enable React Compiler

With the React Compiler, our component code is transformed at build time to automatically apply various forms of memoization. This changes the runtime semantics of our code a little bit and therefore could surface new bugs in the next release cycle in case any components fail to follow the rules of React. See https://react.dev/learn/react-compiler for more information. This results in a small bundle size increase and modest performance gains, but I think it's worth it given the potential for larger performance gains once we tune the component structure a bit more.
2026-08-14 20:29:19 +00:00 · 2026-08-04 12:49:53 +02:00
parent a08a577e18
commit 608695fc95
4 changed files with 65 additions and 12 deletions
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-visually-hidden": "^1.0.3",
    "@react-spring/web": "^10.0.0",
+    "@rolldown/plugin-babel": "^0.2.3",
    "@sentry/react": "^8.0.0",
    "@sentry/vite-plugin": "^3.0.0",
    "@storybook/addon-docs": "^10.3.6",
@@ -81,6 +82,7 @@
    "@vitest/browser-playwright": "^4.1.5",
    "@vitest/coverage-v8": "^4.0.18",
    "@vitest/ui": "4.1.10",
+    "babel-plugin-react-compiler": "^1.0.0",
    "classnames": "^2.3.1",
    "copy-to-clipboard": "^3.3.3",
    "eslint-plugin-element-call": "link:eslint",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -64,6 +64,9 @@ importers:
      '@react-spring/web':
        specifier: ^10.0.0
        version: 10.1.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@rolldown/plugin-babel':
+        specifier: ^0.2.3
+        version: 0.2.3(@babel/core@7.29.7)(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
      '@sentry/react':
        specifier: ^8.0.0
        version: 8.55.2(react@19.2.8)
@@ -135,7 +138,7 @@ importers:
        version: 9.9.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.3(@types/react@19.2.17)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@vitejs/plugin-react':
        specifier: ^6.0.2
-        version: 6.0.5(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7)(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
      '@vitest/browser-playwright':
        specifier: ^4.1.5
        version: 4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)
@@ -145,6 +148,9 @@ importers:
      '@vitest/ui':
        specifier: 4.1.10
        version: 4.1.10(vitest@4.1.10)
+      babel-plugin-react-compiler:
+        specifier: ^1.0.0
+        version: 1.0.0
      classnames:
        specifier: ^2.3.1
        version: 2.5.1
@@ -2505,6 +2511,23 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@rolldown/plugin-babel@0.2.3':
+    resolution: {integrity: sha512-+zEk16yGlz1F9STiRr6uG9hmIXb6nprjLczV/htGptYuLoCuxb+itZ03RKCEeOhBpDDd1NU7qF6x1VLMUp62bw==}
+    engines: {node: '>=22.12.0 || ^24.0.0'}
+    peerDependencies:
+      '@babel/core': ^7.29.0 || ^8.0.0-rc.1
+      '@babel/plugin-transform-runtime': ^7.29.0 || ^8.0.0-rc.1
+      '@babel/runtime': ^7.27.0 || ^8.0.0-rc.1
+      rolldown: ^1.0.0-rc.5
+      vite: ^8.0.0
+    peerDependenciesMeta:
+      '@babel/plugin-transform-runtime':
+        optional: true
+      '@babel/runtime':
+        optional: true
+      vite:
+        optional: true
+
  '@rolldown/pluginutils@1.0.1':
    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}

@@ -3429,6 +3452,9 @@ packages:
    resolution: {integrity: sha512-zBQouZixDTbo3jMGqHKyePxYxr1e5W8UdTmBQ7sNtaA9M2bE32daxxPLS/jojhKOHxQ7LWwPjfiwf/fhaJWzlg==}
    engines: {node: '>=4'}

+  babel-plugin-react-compiler@1.0.0:
+    resolution: {integrity: sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==}
+
  balanced-match@4.0.4:
    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
    engines: {node: 18 || 20 || >=22}
@@ -5713,10 +5739,6 @@ packages:
    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
    engines: {node: '>=14.0.0'}

-  tinyrainbow@3.1.0:
-    resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
-    engines: {node: '>=14.0.0'}
-
  tinyrainbow@3.1.1:
    resolution: {integrity: sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==}
    engines: {node: '>=14.0.0'}
@@ -8061,6 +8083,15 @@ snapshots:
  '@rolldown/binding-win32-x64-msvc@1.1.5':
    optional: true

+  '@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7)(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
+    dependencies:
+      '@babel/core': 7.29.7
+      picomatch: 4.0.4
+      rolldown: 1.1.5
+    optionalDependencies:
+      '@babel/runtime': 7.29.7
+      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+
  '@rolldown/pluginutils@1.0.1': {}

  '@rollup/plugin-inject@5.0.5(rollup@4.60.1)':
@@ -8743,10 +8774,13 @@ snapshots:
      - '@types/react-dom'
      - react-dom

-  '@vitejs/plugin-react@6.0.5(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
+  '@vitejs/plugin-react@6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7)(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
    dependencies:
      '@rolldown/pluginutils': 1.0.1
      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+    optionalDependencies:
+      '@rolldown/plugin-babel': 0.2.3(@babel/core@7.29.7)(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+      babel-plugin-react-compiler: 1.0.0

  '@vitest/browser-playwright@4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)':
    dependencies:
@@ -8853,7 +8887,7 @@ snapshots:
      pathe: 2.0.3
      sirv: 3.0.2
      tinyglobby: 0.2.17
-      tinyrainbow: 3.1.0
+      tinyrainbow: 3.1.1
      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))

  '@vitest/utils@3.2.4':
@@ -8967,6 +9001,10 @@ snapshots:

  axe-core@4.11.3: {}

+  babel-plugin-react-compiler@1.0.0:
+    dependencies:
+      '@babel/types': 7.29.8
+
  balanced-match@4.0.4: {}

  base-x@5.0.1: {}
@@ -11517,8 +11555,6 @@ snapshots:

  tinyrainbow@2.0.0: {}

-  tinyrainbow@3.1.0: {}
-
  tinyrainbow@3.1.1: {}

  tinyspy@4.0.4: {}
--- a/src/useEvents.test.tsx
+++ b/src/useEvents.test.tsx
@@ -28,6 +28,10 @@ test("useTypedEventEmitterState reacts to events", async () => {
  const emitter = new TestEmitter();

  const Test: FC = () => {
+    // Disable the React Compiler
+    // https://github.com/react/react/issues/34901
+    "use no memo";
+
    const value = useTypedEventEmitterState(
      emitter,
      "change",
@@ -51,6 +55,10 @@ test("useTypedEventEmitterState reacts to changes made by an effect mounted on t
  const emitter = new TestEmitter();

  const Test: FC = () => {
+    // Disable the React Compiler
+    // https://github.com/react/react/issues/34901
+    "use no memo";
+
    useEffect(() => emitter.setState(2), []);
    const value = useTypedEventEmitterState(
      emitter,
@@ -69,6 +77,10 @@ test("useTypedEventEmitterState reacts to changes in getState", async () => {
  const emitter = new TestEmitter();

  const Test: FC = () => {
+    // Disable the React Compiler
+    // https://github.com/react/react/issues/34901
+    "use no memo";
+
    const [fn, setFn] = useState(() => emitter.getState);
    const value = useTypedEventEmitterState(emitter, "change", fn);
    return (
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.

 import {
  loadEnv,
-  PluginOption,
+  type PluginOption,
  searchForWorkspaceRoot,
  type ConfigEnv,
  type UserConfig,
@@ -19,8 +19,8 @@ import { codecovVitePlugin } from "@codecov/vite-plugin";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import wasm from "vite-plugin-wasm";
-
-import react from "@vitejs/plugin-react";
+import babel from "@rolldown/plugin-babel";
+import react, { reactCompilerPreset } from "@vitejs/plugin-react";
 import { realpathSync } from "fs";
 import * as fs from "node:fs";

@@ -29,6 +29,9 @@ export const vitePluginsConfig = ({
 }: Pick<ConfigEnv, "mode">): UserConfig => {
  const env = loadEnv(mode, process.cwd());
  const plugins: PluginOption[] = [
+    babel({
+      presets: [reactCompilerPreset()],
+    }),
    react(),
    wasm(),
    nodePolyfills({