perf: introduce React Compiler to improve performance #720

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

snitin315 merged 7 commits into eslint:main from lumirlumir:perf-introduce-react-compiler-for-a-better-performance

May 5, 2025

Member

lumirlumir commented Apr 26, 2025 •

edited

Loading

Prerequisites checklist

I have read the contributing guidelines.

What is the purpose of this pull request?

What changes did you make? (Give an overview)

Hello,

This PR introduces the React Compiler, which improves performance through memoization, similar to how we use useMemo, useCallback, and React.memo.

This PR consists of three parts:

First: Bump the React version to v19.1.0, the latest version.

As mentioned in the official React documentation, the React Compiler works best with React v19. Therefore, I bumped react, react-dom, and react-selector to support the latest React version.
Second: Install babel-plugin-react-compiler to properly support the React Compiler.

Here is the guide for using babel-plugin-react-compiler: https://react.dev/learn/react-compiler#usage-with-babel.

I've removed the .babelrc file and integrated the configuration directly into webpack.config.js, since babel-plugin-react-compiler needs to be applied first.

Babel processes code in the following order:

https://babeljs.io/docs/plugins#plugin-ordering
Third: Introduce eslint-plugin-react-hooks@6 to properly check the immutability characteristics in React.

Alert.js and Configuration.js were modified to enforce immutability. The behavior of the code remains the same; I only added immutability.

Related Issues

Is there anything you'd like reviewers to focus on?

lumirlumir added 3 commits

April 26, 2025 16:04


          wip: bump react to 19.1.0

f918d76


          wip: introduce babel-plugin-react-compiler

e8126de


          wip: introduce eslint-plugin-react-compiler

41fbc1e

github-project-automation bot added this to Triage

github-project-automation bot moved this to Needs Triage in Triage

eslint-github-bot bot added the chore label

netlify bot commented Apr 26, 2025 •

edited

Loading

✅ Deploy Preview for hi-eslint ready!

Name	Link
🔨 Latest commit	`0bb89ee`
🔍 Latest deploy log	https://app.netlify.com/sites/hi-eslint/deploys/681351a9c745f8000873c14b
😎 Deploy Preview	https://deploy-preview-720--hi-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify bot commented Apr 26, 2025 •

edited

Loading

✅ Deploy Preview for new-eslint ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`0bb89ee`
🔍 Latest deploy log	https://app.netlify.com/sites/new-eslint/deploys/681351a93c9ddb00085adf6a
😎 Deploy Preview	https://deploy-preview-720--new-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify bot commented Apr 26, 2025 •

edited

Loading

✅ Deploy Preview for es-eslint ready!

Name	Link
🔨 Latest commit	`0bb89ee`
🔍 Latest deploy log	https://app.netlify.com/sites/es-eslint/deploys/681351a9f1b3940008c063b0
😎 Deploy Preview	https://deploy-preview-720--es-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify bot commented Apr 26, 2025 •

edited

Loading

✅ Deploy Preview for zh-hans-eslint ready!

Name	Link
🔨 Latest commit	`0bb89ee`
🔍 Latest deploy log	https://app.netlify.com/sites/zh-hans-eslint/deploys/681351a9beb9ab0008dcb56e
😎 Deploy Preview	https://deploy-preview-720--zh-hans-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify bot commented Apr 26, 2025 •

edited

Loading

✅ Deploy Preview for pt-br-eslint ready!

Name	Link
🔨 Latest commit	`0bb89ee`
🔍 Latest deploy log	https://app.netlify.com/sites/pt-br-eslint/deploys/681351a9a1523e0008b7ae2c
😎 Deploy Preview	https://deploy-preview-720--pt-br-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

lumirlumir changed the title ~~perf: introduce react compiler for a better performance~~ perf: introduce React Compiler for better performance

netlify bot commented Apr 26, 2025 •

edited

Loading

✅ Deploy Preview for ja-eslint ready!

Name	Link
🔨 Latest commit	`0bb89ee`
🔍 Latest deploy log	https://app.netlify.com/sites/ja-eslint/deploys/681351a9131a9b0008360abb
😎 Deploy Preview	https://deploy-preview-720--ja-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

lumirlumir changed the title ~~perf: introduce React Compiler for better performance~~ perf: adopt React Compiler to improve performance

netlify bot commented Apr 26, 2025 •

edited

Loading

✅ Deploy Preview for de-eslint ready!

Name	Link
🔨 Latest commit	`0bb89ee`
🔍 Latest deploy log	https://app.netlify.com/sites/de-eslint/deploys/681351a9e678f800080f5345
😎 Deploy Preview	https://deploy-preview-720--de-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify bot commented Apr 26, 2025 •

edited

Loading

✅ Deploy Preview for fr-eslint ready!

Name	Link
🔨 Latest commit	`0bb89ee`
🔍 Latest deploy log	https://app.netlify.com/sites/fr-eslint/deploys/681351a9c5ea5c0008d8a220
😎 Deploy Preview	https://deploy-preview-720--fr-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

lumirlumir marked this pull request as ready for review

April 26, 2025 09:10

lumirlumir added 2 commits

April 26, 2025 18:15


          wip: bump babel-plugin-react-compiler

607dd78


          wip: rename reactCompilerPlugin

17a8a7f

lumirlumir commented

View reviewed changes

webpack.config.js

    
              				options: {

              					configFile: path.resolve(__dirname, ".babelrc"),

              					plugins: ["babel-plugin-react-compiler"],

              					presets: ["@babel/preset-env", "@babel/preset-react"],

Member Author

lumirlumir Apr 26, 2025

Ordering: babel-plugin-react-compiler => @babel/preset-react => @babel/preset-env

lumirlumir changed the title ~~perf: adopt React Compiler to improve performance~~ perf: introduce React Compiler to improve performance

snitin315 reviewed

View reviewed changes

package.json Show resolved Hide resolved

snitin315 reviewed

View reviewed changes

Contributor

snitin315 left a comment

Also is it possible to get some performance metrics before/after this change?

lumirlumir marked this pull request as draft

April 30, 2025 13:40


          wip: replace eslint plugin

bd8cbd3

lumirlumir force-pushed the perf-introduce-react-compiler-for-a-better-performance branch from ed7b705 to bd8cbd3 Compare

May 1, 2025 09:55

Member Author

lumirlumir commented May 1, 2025 •

edited

Loading

Hello, @snitin315

After introducing the React Compiler, I observed that some components are now automatically memoized. This helps prevent unnecessary re-renders, which can lead to performance benefits in certain scenarios. However, since render patterns vary across components, it's difficult to provide quantitative measurements. I’d appreciate it if you could consider this change from the perspective of structural optimization.

I’d also like to recommend the following article, which provides a good overview of performance differences before and after adopting the React Compiler:
https://www.developerway.com/posts/how-react-compiler-performs-on-real-code

Before: Memoization ❌

After: Memoization ✅

wip

0bb89ee

lumirlumir marked this pull request as ready for review

May 1, 2025 10:52

lumirlumir requested a review from snitin315

May 1, 2025 10:52

nzakas moved this from Needs Triage to Implementing in Triage

snitin315 approved these changes

View reviewed changes

Contributor

snitin315 left a comment

LGTM, thanks!

snitin315 merged commit 961aeaa into eslint:main

37 checks passed

github-project-automation bot moved this from Implementing to Complete in Triage

snitin315 added the contributor pool label

lumirlumir deleted the perf-introduce-react-compiler-for-a-better-performance branch

May 5, 2025 03:40

nzakas removed the contributor pool label

lumirlumir mentioned this pull request

TODO lumirlumir/web-lumir.page#217

Open

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels