Versions Compared

Version Old Version 5 New Version Current
Changes made by

Brian Smith

Brian Smith

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Things I’ve Learned

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

...

languagediff

...

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

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
languagediff
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
languagediff
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:

Code Block
languagebash
-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
titleFull `npm run lint` output
Code Block
languagenone
/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/
courseware
goal-
search
unsubscribe/
hooks
GoalUnsubscribe.
js
jsx
37
36:3  error  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React
Hooks
Compiler
must
only
always
works
be
when
called
your
in
components
a
follow
consistent
all
order,
the
and
rules
may
of
not
React,
be
disabling
called
them
conditionally.
may
See
result
the
in
Rules
unexpected
of
or
Hooks (https://react.dev/warnings/invalid-hook-call-warning)
incorrect behavior  react-compiler/react-compiler

/home/bsmith/code/frontend-app-learning/src/course-home/
goal
outline-
unsubscribe
tab/
GoalUnsubscribe
Section.jsx
36
43: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/
Section
widgets/ProctoringInfoPanel.jsx
43
131: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/
ProctoringInfoPanel
WeeklyLearningGoalCard.jsx
131
87: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
progress-tab/
widgets
certificate-status/
WeeklyLearningGoalCard
CertificateStatus.jsx
87
215:
3
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
-home/progress-tab/certificate-status/CertificateStatus
/CourseBreadcrumbs.jsx
215
125:
5
20  error
React
Hooks
Compiler
must
has
be
skipped
called
optimizing
at
this
the
component
top
because
level
one
in
or
the
more
body
React
of
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
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/react-compiler

/home/bsmith/code/frontend-app-learning/src/courseware/course/
CourseBreadcrumbs.jsx
bookmark/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/
bookmark
celebration/
BookmarkButton
CelebrationModal.jsx
39
31: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/
CelebrationModal
WeeklyGoalCelebrationModal.jsx
31
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 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 behavior
course-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/
CourseExit
CourseRecommendations.jsx
48
146:
5
3  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
146
43:
3
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/
new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsTrigger.tsx
sequence/SequenceContent.jsx
43
47:
5
16  error
React
Hooks
Compiler
must
has
always
skipped
be
optimizing
called
this
in
component
a
because
consistent
one
order,
or
and
more
may
React
not
ESLint
be
rules
called
were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
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/sequence/
SequenceContent.jsx
Unit/hooks/useIFrameBehavior.js
47
150:
16
5  error
Hooks
Writing
must
to
always
a
be
variable
called
defined
in
outside a
consistent
component
order,
or
and
hook
may
is 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 effect
common/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/
common
sidebars/discussions/
SidebarBase
DiscussionsTrigger.jsx
32
39: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/DiscussionsTrigger
learning/src/decode-page-route/index.jsx
39
26:
5
26  error
React
Hooks
Compiler
must
has
be
skipped
called
optimizing
at
this
the
component
top
because
level
one
in
or
the
more
body
React
of
ESLint
a
rules
function
were
component
disabled.
or
React
custom
Compiler
hook,
only
and
works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
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/
decode-page-route/index
generic/CourseAccessErrorPage.jsx
26
21:
26
3  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
21
25:
3
7  error
React
Unexpected
Compiler
reassignment
has
of
skipped
a
optimizing
variable
this
which
component
was
because
defined
one
outside
or
of
more
the
React
component.
ESLint
Components
rules
and
were
hooks
disabled.
should
React
be
Compiler
pure
only
and
works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
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)  react-compiler/react-compiler

/home/bsmith/code/frontend-app-learning/src/generic/
path-fixes
tabs/
PathFixesProvider
useIndexOfLastVisibleChild.
test.jsx
js
25
74:
7
3  error
Unexpected
React
reassignment
Compiler
of
has
a
skipped
variable
optimizing
which
this
was
component
defined
because
outside
one
of
or
the
more
component.
React
Components
ESLint
and
rules
hooks
were
should
disabled.
be
React
pure
Compiler
and
only
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/
tabs
upgrade-notification/
useIndexOfLastVisibleChild
UpgradeNotification.
js
jsx
74
313: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/
upgrade
user-
notification
messages/
UpgradeNotification
hooks.
jsx
js
313
34: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/user
instructor-
messages
toolbar/
hooks
InstructorToolbar.
js
jsx
34
50: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/
instructor
product-
toolbar
tours/
InstructorToolbar
ProductTours.jsx
50
1:
3
1  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/
product
streak-
tours
celebration/
ProductTours
StreakCelebrationModal.jsx
1
114:
1
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/
shared/streak
tab-
celebration
page/
StreakCelebrationModal
TabContainer.jsx
114
28: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.