Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 7 commits into from
Aug 19, 2025
Merged

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

merged 7 commits into from
Aug 19, 2025

Conversation

hi-ogawa
Copy link
Contributor

@hi-ogawa hi-ogawa commented Aug 18, 2025 •
edited
Loading

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

@hi-ogawa 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
chore: changelog
e0ef709
@hi-ogawa
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 hi-ogawa marked this pull request as ready for review August 19, 2025 01:51
@hi-ogawa hi-ogawa merged commit d3934ad into main Aug 19, 2025
11 checks passed
@hi-ogawa 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 chrisbbreuer mentioned this pull request Aug 19, 2025
Merged
1 task
renovate bot added a commit to andrei-picus-tink/auto-renovate that referenced this pull request Aug 23, 2025
@renovate
Update dependency @vitejs/plugin-react to v5
144b325 
| 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)
renovate bot added a commit to andrei-picus-tink/auto-renovate that referenced this pull request Aug 23, 2025
@renovate
Update dependency @vitejs/plugin-react to v5
ce8cd5a 
| 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)
renovate bot added a commit to andrei-picus-tink/auto-renovate that referenced this pull request Aug 24, 2025
@renovate
Update dependency @vitejs/plugin-react to v5
b0d28bd 
| 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)
renovate bot added a commit to andrei-picus-tink/auto-renovate that referenced this pull request Sep 1, 2025
@renovate
Update dependency @vitejs/plugin-react to v5
df408a8 
| 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)
renovate bot added a commit to andrei-picus-tink/auto-renovate that referenced this pull request Sep 1, 2025
@renovate
Update dependency @vitejs/plugin-react to v5
477d3a2 
| 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ArnaudBarre ArnaudBarre ArnaudBarre approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@hi-ogawa @ArnaudBarre