perf(react): skip react compiler when `compilationMode: "annotation"` but no `"use memo"` by hi-ogawa · Pull Request #734 · vitejs/vite-plugin-react

hi-ogawa · 2025-08-18T04:34:37Z

Description

I saw turbopack's PR vercel/next.js#82631 which does something similar. It doesn't look like react compiler itself has such early bailout, so implementing this here will help users to try out react compiler with opt-in "use memo" without sacrificing entire build's performance. https://react.dev/learn/react-compiler/incremental-adoption#annotation-mode-configuration

It's hard to write a proper test for this. For now, manually confirmed in playground/compiler by

add compilationMode: "annotation" and vite-plugin-inspect to vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import inspect from "vite-plugin-inspect"

// https://vite.dev/config/
export default defineConfig(({ command }) => {
  const babelPlugins = [['babel-plugin-react-compiler', {
    compilationMode: "annotation",
  }]]
  if (command === 'serve') {
    babelPlugins.push(['@babel/plugin-transform-react-jsx-development', {}])
  }

  return {
    server: { port: 8900 /* Should be unique */ },
    plugins: [react({ babel: { plugins: babelPlugins } }), inspect({ build: true }),],
  }
})

add "use memo" to App.tsx
run pnpm -C playground/compiler build
open pnpm dlx sirv-cli playground/compiler/.vite-inspect
- see vite:react-babel transform runs only on App.tsx and not on other tsx files

… but no "use memo"

…mpilationmode_annotation_but_no_use_memo_

…iler_when_compilationmode_annotation_but_no_use_memo_' into 08-18-perf_react_skip_react_compiler_when_compilationmode_annotation_but_no_use_memo_

…mpilationmode_annotation_but_no_use_memo_

| datasource | package | from | to | | ---------- | -------------------- | ----- | ----- | | npm | @vitejs/plugin-react | 4.7.0 | 5.0.1 | ## [v5.0.1](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#501-2025-08-19) ##### Set `optimizeDeps.rollupOptions.transform.jsx` instead of `optimizeDeps.rollupOptions.jsx` for rolldown-vite ([#735](vitejs/vite-plugin-react#735)) `optimizeDeps.rollupOptions.jsx` is going to be deprecated in favor of `optimizeDeps.rollupOptions.transform.jsx`. ##### Perf: skip `babel-plugin-react-compiler` if code has no `"use memo"` when `{ compilationMode: "annotation" }` ([#734](vitejs/vite-plugin-react#734)) ##### Respect tsconfig `jsxImportSource` ([#726](vitejs/vite-plugin-react#726)) ##### Fix `reactRefreshHost` option on rolldown-vite ([#716](vitejs/vite-plugin-react#716)) ##### Fix `RefreshRuntime` being injected twice for class components on rolldown-vite ([#708](vitejs/vite-plugin-react#708)) ##### Skip `babel-plugin-react-compiler` on non client environment ([689](vitejs/vite-plugin-react#689)) ## [v5.0.0](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#500-2025-08-07)

| datasource | package | from | to | | ---------- | -------------------- | ----- | ----- | | npm | @vitejs/plugin-react | 4.7.0 | 5.0.2 | ## [v5.0.2](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#502-2025-08-28) ##### Skip transform hook completely in rolldown-vite in dev if possible ([#783](vitejs/vite-plugin-react#783)) ## [v5.0.1](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#501-2025-08-19) ##### Set `optimizeDeps.rollupOptions.transform.jsx` instead of `optimizeDeps.rollupOptions.jsx` for rolldown-vite ([#735](vitejs/vite-plugin-react#735)) `optimizeDeps.rollupOptions.jsx` is going to be deprecated in favor of `optimizeDeps.rollupOptions.transform.jsx`. ##### Perf: skip `babel-plugin-react-compiler` if code has no `"use memo"` when `{ compilationMode: "annotation" }` ([#734](vitejs/vite-plugin-react#734)) ##### Respect tsconfig `jsxImportSource` ([#726](vitejs/vite-plugin-react#726)) ##### Fix `reactRefreshHost` option on rolldown-vite ([#716](vitejs/vite-plugin-react#716)) ##### Fix `RefreshRuntime` being injected twice for class components on rolldown-vite ([#708](vitejs/vite-plugin-react#708)) ##### Skip `babel-plugin-react-compiler` on non client environment ([689](vitejs/vite-plugin-react#689)) ## [v5.0.0](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#500-2025-08-07)

This MR contains the following updates: | Package | Type | Update | Change | OpenSSF | |---|---|---|---|---| | [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme) ([source](https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react)) | devDependencies | major | [`^4.5.2` → `^5.0.0`](https://renovatebot.com/diffs/npm/@vitejs%2fplugin-react/4.7.0/5.1.2) | [![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/vitejs/vite-plugin-react/badge)](https://securityscorecards.dev/viewer/?uri=github.com/vitejs/vite-plugin-react) | --- ### Release Notes <details> <summary>vitejs/vite-plugin-react (@vitejs/plugin-react)</summary> ### [`v5.1.2`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#512-2025-12-08) [Compare Source](vitejs/vite-plugin-react@23db727...f127a24) ### [`v5.1.1`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#511-2025-11-12) [Compare Source](vitejs/vite-plugin-react@3e5a374...23db727) ##### Update code to support newer `rolldown-vite` ([#976](vitejs/vite-plugin-react#976)) `rolldown-vite` will remove `optimizeDeps.rollupOptions` in favor of `optimizeDeps.rolldownOptions` soon. This plugin now uses `optimizeDeps.rolldownOptions` to support newer `rolldown-vite`. Please update `rolldown-vite` to the latest version if you are using an older version. ### [`v5.1.0`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#510-2025-10-24) [Compare Source](vitejs/vite-plugin-react@450d7df...3e5a374) ##### Add `@vitejs/plugin-react/preamble` virtual module for SSR HMR ([#890](vitejs/vite-plugin-react#890)) SSR applications can now initialize HMR runtime by importing `@vitejs/plugin-react/preamble` at the top of their client entry instead of manually calling `transformIndexHtml`. This simplifies SSR setup for applications that don't use the `transformIndexHtml` API. ##### Fix raw Rolldown support for Rolldown 1.0.0-beta.44+ ([#930](vitejs/vite-plugin-react#930)) Rolldown 1.0.0-beta.44+ removed the top-level `jsx` option in favor of `transform.jsx`. This plugin now uses the `transform.jsx` option to support Rolldown 1.0.0-beta.44+. ### [`v5.0.4`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#504-2025-09-27) [Compare Source](vitejs/vite-plugin-react@8293cb3...450d7df) ##### Perf: use native refresh wrapper plugin in rolldown-vite ([#881](vitejs/vite-plugin-react#881)) ### [`v5.0.3`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#503-2025-09-17) [Compare Source](vitejs/vite-plugin-react@1f4b4d9...8293cb3) ##### HMR did not work for components imported with queries with rolldown-vite ([#872](vitejs/vite-plugin-react#872)) ##### Perf: simplify refresh wrapper generation ([#835](vitejs/vite-plugin-react#835)) ### [`v5.0.2`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#502-2025-08-28) [Compare Source](vitejs/vite-plugin-react@efe4344...1f4b4d9) ##### Skip transform hook completely in rolldown-vite in dev if possible ([#783](vitejs/vite-plugin-react#783)) ### [`v5.0.1`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#501-2025-08-19) [Compare Source](vitejs/vite-plugin-react@9e4a944...efe4344) ##### Set `optimizeDeps.rollupOptions.transform.jsx` instead of `optimizeDeps.rollupOptions.jsx` for rolldown-vite ([#735](vitejs/vite-plugin-react#735)) `optimizeDeps.rollupOptions.jsx` is going to be deprecated in favor of `optimizeDeps.rollupOptions.transform.jsx`. ##### Perf: skip `babel-plugin-react-compiler` if code has no `"use memo"` when `{ compilationMode: "annotation" }` ([#734](vitejs/vite-plugin-react#734)) ##### Respect tsconfig `jsxImportSource` ([#726](vitejs/vite-plugin-react#726)) ##### Fix `reactRefreshHost` option on rolldown-vite ([#716](vitejs/vite-plugin-react#716)) ##### Fix `RefreshRuntime` being injected twice for class components on rolldown-vite ([#708](vitejs/vite-plugin-react#708)) ##### Skip `babel-plugin-react-compiler` on non client environment ([689](vitejs/vite-plugin-react#689)) ### [`v5.0.0`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#500-2025-08-07) [Compare Source](vitejs/vite-plugin-react@8041706...9e4a944) </details> --- - [ ] If you want to rebase/retry this MR, check this box --- This MR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  See merge request swiss-armed-forces/cyber-command/cea/loom!212 Co-authored-by: Loom MR Pipeline Trigger <group_103951964_bot_9504bb8dead6d4e406ad817a607f24be@noreply.gitlab.com>

chore(deps): update @vitejs/plugin-react (major) This MR contains the following updates: | Package | Type | Update | Change | OpenSSF | |---|---|---|---|---| | [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme) ([source](https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react)) | devDependencies | major | [`^4.5.2` → `^5.0.0`](https://renovatebot.com/diffs/npm/@vitejs%2fplugin-react/4.7.0/5.1.2) | [![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/vitejs/vite-plugin-react/badge)](https://securityscorecards.dev/viewer/?uri=github.com/vitejs/vite-plugin-react) | --- ### Release Notes <details> <summary>vitejs/vite-plugin-react (@vitejs/plugin-react)</summary> ### [`v5.1.2`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#512-2025-12-08) [Compare Source](vitejs/vite-plugin-react@23db727...f127a24) ### [`v5.1.1`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#511-2025-11-12) [Compare Source](vitejs/vite-plugin-react@3e5a374...23db727) ##### Update code to support newer `rolldown-vite` ([#976](vitejs/vite-plugin-react#976)) `rolldown-vite` will remove `optimizeDeps.rollupOptions` in favor of `optimizeDeps.rolldownOptions` soon. This plugin now uses `optimizeDeps.rolldownOptions` to support newer `rolldown-vite`. Please update `rolldown-vite` to the latest version if you are using an older version. ### [`v5.1.0`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#510-2025-10-24) [Compare Source](vitejs/vite-plugin-react@450d7df...3e5a374) ##### Add `@vitejs/plugin-react/preamble` virtual module for SSR HMR ([#890](vitejs/vite-plugin-react#890)) SSR applications can now initialize HMR runtime by importing `@vitejs/plugin-react/preamble` at the top of their client entry instead of manually calling `transformIndexHtml`. This simplifies SSR setup for applications that don't use the `transformIndexHtml` API. ##### Fix raw Rolldown support for Rolldown 1.0.0-beta.44+ ([#930](vitejs/vite-plugin-react#930)) Rolldown 1.0.0-beta.44+ removed the top-level `jsx` option in favor of `transform.jsx`. This plugin now uses the `transform.jsx` option to support Rolldown 1.0.0-beta.44+. ### [`v5.0.4`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#504-2025-09-27) [Compare Source](vitejs/vite-plugin-react@8293cb3...450d7df) ##### Perf: use native refresh wrapper plugin in rolldown-vite ([#881](vitejs/vite-plugin-react#881)) ### [`v5.0.3`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#503-2025-09-17) [Compare Source](vitejs/vite-plugin-react@1f4b4d9...8293cb3) ##### HMR did not work for components imported with queries with rolldown-vite ([#872](vitejs/vite-plugin-react#872)) ##### Perf: simplify refresh wrapper generation ([#835](vitejs/vite-plugin-react#835)) ### [`v5.0.2`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#502-2025-08-28) [Compare Source](vitejs/vite-plugin-react@efe4344...1f4b4d9) ##### Skip transform hook completely in rolldown-vite in dev if possible ([#783](vitejs/vite-plugin-react#783)) ### [`v5.0.1`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#501-2025-08-19) [Compare Source](vitejs/vite-plugin-react@9e4a944...efe4344) ##### Set `optimizeDeps.rollupOptions.transform.jsx` instead of `optimizeDeps.rollupOptions.jsx` for rolldown-vite ([#735](vitejs/vite-plugin-react#735)) `optimizeDeps.rollupOptions.jsx` is going to be deprecated in favor of `optimizeDeps.rollupOptions.transform.jsx`. ##### Perf: skip `babel-plugin-react-compiler` if code has no `"use memo"` when `{ compilationMode: "annotation" }` ([#734](vitejs/vite-plugin-react#734)) ##### Respect tsconfig `jsxImportSource` ([#726](vitejs/vite-plugin-react#726)) ##### Fix `reactRefreshHost` option on rolldown-vite ([#716](vitejs/vite-plugin-react#716)) ##### Fix `RefreshRuntime` being injected twice for class components on rolldown-vite ([#708](vitejs/vite-plugin-react#708)) ##### Skip `babel-plugin-react-compiler` on non client environment ([689](vitejs/vite-plugin-react#689)) ### [`v5.0.0`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#500-2025-08-07) [Compare Source](vitejs/vite-plugin-react@8041706...9e4a944) </details> --- - [ ] If you want to rebase/retry this MR, check this box --- This MR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  See merge request swiss-armed-forces/cyber-command/cea/loom!212 Co-authored-by: Loom MR Pipeline Trigger <group_103951964_bot_9504bb8dead6d4e406ad817a607f24be@noreply.gitlab.com> Co-authored-by: open-source Pipeline <group_90701827_bot_ed04ae348bc5f40af9966fb8b6867e99@noreply.gitlab.com>

hi-ogawa added 3 commits August 18, 2025 13:20

perf(react): skip react compiler when compilationMode: 'annotation'…

eae016b

… but no "use memo"

chore: comment

6f66074

Merge branch 'main' into 08-18-perf_react_skip_react_compiler_when_co…

817b57a

…mpilationmode_annotation_but_no_use_memo_

ArnaudBarre approved these changes Aug 18, 2025

View reviewed changes

hi-ogawa changed the title ~~perf(react): skip react compiler when compilationMode: 'annotation' but no "use memo"~~ perf(react): skip react compiler when compilationMode: "annotation" but no "use memo" Aug 18, 2025

hi-ogawa added 2 commits August 19, 2025 10:50

chore: changelog

e0ef709

Merge remote-tracking branch 'origin/08-18-perf_react_skip_react_comp…

1810994

…iler_when_compilationmode_annotation_but_no_use_memo_' into 08-18-perf_react_skip_react_compiler_when_compilationmode_annotation_but_no_use_memo_

hi-ogawa marked this pull request as ready for review August 19, 2025 01:51

hi-ogawa added 2 commits August 19, 2025 11:18

Merge branch 'main' into 08-18-perf_react_skip_react_compiler_when_co…

a774320

…mpilationmode_annotation_but_no_use_memo_

Merge branch 'main' into 08-18-perf_react_skip_react_compiler_when_co…

a3f38ec

…mpilationmode_annotation_but_no_use_memo_

hi-ogawa merged commit d3934ad into main Aug 19, 2025
11 checks passed

hi-ogawa deleted the 08-18-perf_react_skip_react_compiler_when_compilationmode_annotation_but_no_use_memo_ branch August 19, 2025 02:56

chrisbbreuer mentioned this pull request Aug 19, 2025

chore(deps): update dependency @vitejs/plugin-react to 5.0.1 stacksjs/ts-maps#51

Merged

1 task

claude bot mentioned this pull request Dec 8, 2025

chore(deps): update dependency @vitejs/plugin-react to v5.1.2 rknightion/paperless-ngx-dedupe#17

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

perf(react): skip react compiler when `compilationMode: "annotation"` but no `"use memo"`#734

perf(react): skip react compiler when `compilationMode: "annotation"` but no `"use memo"`#734
hi-ogawa merged 7 commits intomainfrom
08-18-perf_react_skip_react_compiler_when_compilationmode_annotation_but_no_use_memo_

hi-ogawa commented Aug 18, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Comments

Conversation

hi-ogawa commented Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

hi-ogawa commented Aug 18, 2025 •

edited

Loading