...
Things I’ve Learned
React Compiler is currently in Beta (as of writing 2025/01/30)
React Compiler can be used with React 17, 18, or 19 React Compiler - React (Using React Compiler with React 17 or 18)
There is a community Webpack loader for React Compiler
https://github.com/openedx/platform-roadmap/issues/422
What is React Compiler?
From React Compiler - React (
...
https://github.com/SukkaW/react-compiler-webpack
...
React Compiler is fairly strict about projects following the Rules of React
...
There is a React Compiler eslint plugin that can be used even if React Compiler itself isn’t being used
What I’ve Tried
In order to test out the possibility of using React Compiler on our MFEs, I decided to try setting it up for frontend-app-learning. The first thing I did was install dependencies
...
...
What does the compiler do?) :
In order to optimize applications, React Compiler automatically memoizes your code. You may be familiar today with memoization through APIs such as useMemo, useCallback, and React.memo. With these APIs you can tell React that certain parts of your application don’t need to recompute if their inputs haven’t changed, reducing work on updates. While powerful, it’s easy to forget to apply memoization or apply them incorrectly. This can lead to inefficient updates as React has to check parts of your UI that don’t have any meaningful changes.
If your codebase is already very well-memoized, you might not expect to see major performance improvements with the compiler. However, in practice memoizing the correct dependencies that cause performance issues is tricky to get right by hand.
Why is React Compiler something we want to use?
The main benefits I see from React Compiler regard maintainability. Memoization can be tricky to get right, and being able to rely on the compiler for that aspect of performance will allow us to have all the performance benefits without needing to maintain handwritten memoization code.
Things I’ve Learned
React Compiler is currently in Beta (as of writing 2025/01/30)
React Compiler can be used with React 17, 18, or 19 React Compiler - React (Using React Compiler with React 17 or 18)
There is a community Webpack loader for React Compiler
React Compiler is fairly strict about projects following the Rules of React
There is a React Compiler eslint plugin that can be used even if React Compiler itself isn’t being used
What I’ve Tried
In order to test out the possibility of using React Compiler on our MFEs, I decided to try setting it up for frontend-app-learning. The first thing I did was install dependencies
| Code Block |
|---|
|
diff --git a/package.json b/package.json
index 80d11b8..d37bffd 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
"prop-types": "15.8.1",
"reactquery-domstring": "17.^7.1.3",
"react": "17.0.2",
+ "react-compiler-runtime": "^19.0.0-beta-27714ef-20250124",
"react-dom": "17.0.2",
"react-helmet": "6.1.0",
"react-redux": "7.2.9",
@@ -87,9 +88,11 @@
"axios-mock-adapter": "2.1.0",
"bundlewatch": "^0.4.0",
"eslint-import-resolver-webpack": "^0.13.9",
+ "eslint-plugin-react-compiler": "^19.0.0-beta-27714ef-20250124",
"jest": "^29.7.0",
"jest-console-group-reporter": "^1.1.1",
"jest-when": "^3.6.0",
+ "react-compiler-webpack": "^0.1.2",
"rosie": "2.1.1"
},
"bundlewatch": { |
...
| Code Block |
|---|
|
diff --git a/.eslintrc.js b/.eslintrc.js
index 97be119..5309f19 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,6 +2,9 @@
const { createConfig } = require('@openedx/frontend-build');
const config = createConfig('eslint', {
+ plugins: [
+ 'eslint-plugin-react-compiler',
+ ],
rules: {
// TODO: all these rules should be renabled/addressed. temporarily turned off to unblock a release.
'react-hooks/rules-of-hooks': 'off',
@@ -11,6 +14,7 @@ const config = createConfig('eslint', {
'react/jsx-no-useless-fragment': 'off',
'react/no-unknown-property': 'off',
'func-names': 'off',
+ 'react-compiler/react-compiler': 'error',
},
settings: {
'import/resolver': { |
After which running npm run lint led to the following errors:
| Expand |
|---|
| title | Full `npm run lint` output |
|---|
|
| Code Block |
|---|
|
|
-no-useless-fragment': 'off',
'react/no-unknown-property': 'off',
'func-names': 'off',
+ 'react-compiler/react-compiler': 'error',
},
settings: {
'import/resolver': {
After which running npm run lint led to the following errors:
20 “React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled.” errors
2 “Hooks must always be called in a consistent order” errors
2 “Hooks must be called at the top level in the body of a function component or custom hook” errors
1 “Writing to a variable defined outside a component or hook is not allowed” error
1 “Unexpected reassignment of a variable which was defined outside of the component.” error
| Expand |
|---|
| title | Full `npm run lint` output |
|---|
|
| Code Block |
|---|
| /home/bsmith/code/frontend-app-learning/src/course-home/courseware-search/hooks.js
37:3 error Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/course-home/coursewaregoal-searchunsubscribe/hooksGoalUnsubscribe.jsjsx
3736:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React HooksCompiler mustonly alwaysworks bewhen calledyour incomponents afollow consistentall order,the andrules mayof notReact, bedisabling calledthem conditionally.may Seeresult thein Rulesunexpected ofor Hooks (https://react.dev/warnings/invalid-hook-call-warning)incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/course-home/goaloutline-unsubscribetab/GoalUnsubscribeSection.jsx
3643:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/course-home/outline-tab/Sectionwidgets/ProctoringInfoPanel.jsx
43131:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/course-home/outline-tab/widgets/ProctoringInfoPanelWeeklyLearningGoalCard.jsx
13187:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/course-home/outlineprogress-tab/widgetscertificate-status/WeeklyLearningGoalCardCertificateStatus.jsx
87215:35 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course-home/progress-tab/certificate-status/CertificateStatus/CourseBreadcrumbs.jsx
215125:520 error ReactHooks Compilermust hasbe skippedcalled optimizingat thisthe componenttop becauselevel onein orthe morebody Reactof ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behaviora function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/CourseBreadcrumbs.jsxbookmark/BookmarkButton.jsx
39:5 error 125:20 error Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/bookmarkcelebration/BookmarkButtonCelebrationModal.jsx
3931:5 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/celebration/CelebrationModalWeeklyGoalCelebrationModal.jsx
3123:5 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/celebration/WeeklyGoalCelebrationModal.jsx
23:5 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behaviorcourse-exit/CourseExit.jsx
48:5 error Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/course-exit/CourseExitCourseRecommendations.jsx
48146:53 error React Compiler has skipped optimizing this component because one or more React ESLint rules Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/course-exit/CourseRecommendations.jsx/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsTrigger.tsx
14643:35 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsTrigger.tsxsequence/SequenceContent.jsx
4347:516 error ReactHooks Compilermust hasalways skippedbe optimizingcalled thisin componenta becauseconsistent oneorder, orand moremay Reactnot ESLintbe rulescalled were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behaviorconditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/sequence/SequenceContent.jsxUnit/hooks/useIFrameBehavior.js
47150:165 error HooksWriting mustto alwaysa bevariable calleddefined inoutside a consistentcomponent order,or andhook mayis not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)allowed. Consider using an effect react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/sidebar/sequence/Unit/hooks/useIFrameBehavior.js
150:5 error Writing to a variable defined outside a component or hook is not allowed. Consider using an effectcommon/SidebarBase.jsx
32:5 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/sidebar/commonsidebars/discussions/SidebarBaseDiscussionsTrigger.jsx
3239:5 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/sidebar/sidebars/discussions/DiscussionsTriggerlearning/src/decode-page-route/index.jsx
3926:526 error ReactHooks Compilermust hasbe skippedcalled optimizingat thisthe componenttop becauselevel onein orthe morebody Reactof ESLinta rulesfunction werecomponent disabled.or Reactcustom Compilerhook, onlyand works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behaviormay not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/decode-page-route/indexgeneric/CourseAccessErrorPage.jsx
2621:263 error Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/generic/CourseAccessErrorPage/path-fixes/PathFixesProvider.test.jsx
2125:37 error ReactUnexpected Compilerreassignment hasof skippeda optimizingvariable thiswhich componentwas becausedefined oneoutside orof morethe Reactcomponent. ESLintComponents rulesand werehooks disabled.should Reactbe Compilerpure onlyand works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behaviorside-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/generic/path-fixestabs/PathFixesProvideruseIndexOfLastVisibleChild.test.jsxjs
2574:73 error UnexpectedReact reassignmentCompiler ofhas askipped variableoptimizing whichthis wascomponent definedbecause outsideone ofor themore component.React ComponentsESLint andrules hookswere shoulddisabled. beReact pureCompiler andonly side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/generic/tabsupgrade-notification/useIndexOfLastVisibleChildUpgradeNotification.jsjsx
74313:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/generic/upgradeuser-notificationmessages/UpgradeNotificationhooks.jsxjs
31334:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/generic/userinstructor-messagestoolbar/hooksInstructorToolbar.jsjsx
3450:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/instructorproduct-toolbartours/InstructorToolbarProductTours.jsx
501:31 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/shared/productstreak-tourscelebration/ProductToursStreakCelebrationModal.jsx
1114:13 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/shared/streaktab-celebrationpage/StreakCelebrationModalTabContainer.jsx
11428:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/ |
|
Most of the non “skipped optimizing” errors come from not following https://react.dev/reference/rules/rules-of-hooks
Proposed Next Steps
For frontend-app-learning
...
specifically, I think simply removing ‘react-hooks/rules-of-hooks': ‘off', from .eslintrc.js is a great first step.
Looking beyond the one MFE, I think a great next step to move us closer to being able to use React Compiler when it moves out of beta is to start using the react-compiler/react-compiler
...
eslint rules. If we add the eslint rules to frontend-build as warnings we’ll be able to work through those without breaking anything, and eventually turn them into errors when we’re ready to push towards actually using React Compiler.