✨ Add React Compiler support with ESLint integration#290
✨ Add React Compiler support with ESLint integration#290tomwissing wants to merge 3 commits intomainfrom
Conversation
Enables React Compiler to optimize React components during build time. This improves performance by compiling React components into highly optimized JavaScript, reducing runtime overhead.
Adds the `eslint-plugin-react-hooks` plugin to the ESLint configuration. This helps enforce the rules of hooks and ensures best practices for using React Hooks, preventing potential issues related to dependencies and execution order. It includes excluding eslintrc.js from eslint checks.
Removes the React Hooks linting rules from the ESLint configuration, as they are no longer required. This simplifies the ESLint setup.
There was a problem hiding this comment.
Pull request overview
This PR introduces React Compiler support (via Babel) and enables React Hooks linting rules through ESLint configuration updates.
Changes:
- Add
babel-plugin-react-compilerand enable it inbabel.config.mjs. - Add React Hooks ESLint plugin + extend
plugin:react-hooks/recommended. - Add
react-compiler-runtimedependency and update lockfile accordingly.
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Adds React Compiler Babel plugin, React Hooks ESLint plugin, and react-compiler-runtime. |
| package-lock.json | Locks new dependencies and shows updated dependency tree resolution. |
| babel.config.mjs | Enables React Compiler plugin globally in Babel config. |
| .eslintrc.js | Enables React Hooks lint plugin and recommended ruleset. |
| .eslintignore | Ignores .eslintrc.js during lint runs. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "typescript": "^5.9.3" | ||
| }, | ||
| "dependencies": { | ||
| "react-compiler-runtime": "^1.0.0" | ||
| } | ||
| } |
There was a problem hiding this comment.
react-compiler-runtime is added only to the workspace root dependencies, but this repo publishes the individual workspaces (lerna.json only includes packages/*). If the React Compiler injects runtime imports into the built output, consumers of each published package will get "Cannot find module 'react-compiler-runtime'" unless every published package declares this dependency (or you bundle/inline the runtime). Please add react-compiler-runtime to the dependencies of each package that is built with the compiler, or change the build so the published artifacts don’t require it.
| "typescript": "^5.9.3" | |
| }, | |
| "dependencies": { | |
| "react-compiler-runtime": "^1.0.0" | |
| } | |
| } | |
| "typescript": "^5.9.3", | |
| "react-compiler-runtime": "^1.0.0" | |
| } | |
| } |
| "babel-plugin-react-compiler": "^1.0.0", | ||
| "concurrently": "^9.2.1", | ||
| "eslint": "^8.57.1", | ||
| "eslint-plugin-react-hooks": "^7.0.1", |
There was a problem hiding this comment.
Adding eslint-plugin-react-hooks@7.0.1 conflicts with the peer expectation from the transitive eslint-config-airbnb@19.x used by @chayns-toolkit/eslint-config (it declares eslint-plugin-react-hooks: ^4.3.0). This forces npm to install multiple copies of the plugin and can trigger ESLint “plugin was conflicted between …” resolution errors. Consider using a hooks plugin version compatible with the toolkit/airbnb config, or updating the shared ESLint config stack so all configs agree on a single major of eslint-plugin-react-hooks.
| "eslint-plugin-react-hooks": "^7.0.1", | |
| "eslint-plugin-react-hooks": "^4.3.0", |
| ], | ||
| }, | ||
| extends: ['@chayns-toolkit', 'plugin:storybook/recommended'], | ||
| extends: ['@chayns-toolkit', 'plugin:storybook/recommended', 'plugin:react-hooks/recommended'], |
There was a problem hiding this comment.
PR description says the React Hooks recommended rules are “set to warn”, but extending plugin:react-hooks/recommended keeps the plugin defaults (notably rules-of-hooks is typically an error). Either update the config to explicitly set the rule severities you want, or adjust the PR description so it matches the actual behavior.
Changes
babel-plugin-react-compilerfor automatic memoizationreact-compiler-runtimefor React 18 compatibilityeslint-plugin-react-hookswith recommended rules (set to warn)