-
Notifications
You must be signed in to change notification settings - Fork 198
Introduce React Compiler #8967
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.
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
Introduce React Compiler #8967
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR integrates the React Compiler (from React 19) into the project by adding the babel-plugin-react-compiler and enabling stricter React Hooks ESLint rules. The compiler aims to automatically optimize React components for better performance by analyzing and transforming code at build time.
- Added React Compiler babel plugin and runtime dependencies
- Upgraded
eslint-plugin-react-hooksto version 7.0.1 with stricter rules - Added ESLint suppressions for React Compiler incompatibilities with TODO comments
Reviewed Changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Added babel-plugin-react-compiler and react-compiler-runtime dependencies, upgraded eslint-plugin-react-hooks to 7.0.1, removed unused eslint-formatter-jslint-xml |
| package-lock.json | Updated lock file with new dependencies and their resolution details |
| babel.config.js | Configured React Compiler plugin targeting React 18, moved plugins before presets |
| eslint.config.mjs | Enabled recommended-latest React Hooks ESLint rules for React Compiler compatibility |
| src/table/table.stories.tsx | Suppressed react-hooks/set-state-in-effect rule for state updates in useEffect |
| src/table/simple-table.stories.tsx | Suppressed react-hooks/set-state-in-effect rule for state updates in useEffect |
| src/tab-trap/tab-trap.tsx | Suppressed react-hooks/immutability rule for callback and cleanup function calls |
| src/popup/popup.stories.tsx | Suppressed react-hooks/unsupported-syntax rule for class component usage |
| src/heading/heading.tsx | Suppressed react-hooks/static-components rule for dynamic Tag component |
| src/collapse/collapse-content.tsx | Suppressed react-hooks/refs rule for ref access in useMemo |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
fe17db6 to
03f69b2
Compare
https://react.dev/learn/react-compiler
example output:

"Magic Memo" badges in React DevTools:
The next step is to fix the suppressed ESLint warnings, as they make the compiler skip these pieces