[React] Enable react compiler

Using annotation mode. To enable for a function, type "use memo" as the
first line in function body. (or hook).

eslint.config.mjs

@@ -123,6 +123,7 @@ export default tseslint.config(
       '@typescript-eslint/consistent-return': 'error', // NOTE: This is weaker than tsconfig.json noImplicitReturns, and should be replaced once ts migration complete
       '@typescript-eslint/consistent-type-definitions': 'off',
       '@typescript-eslint/dot-notation': 'error',
+      '@typescript-eslint/prefer-nullish-coalescing': 'warn',
       '@typescript-eslint/prefer-destructuring': ['error', { VariableDeclarator: { object: true } }],
       '@typescript-eslint/no-empty-object-type': ['error', { allowInterfaces: 'with-single-extends' }],
       '@typescript-eslint/no-explicit-any': 'off', // TODO: enable when feeling brave

services/frontend/package-lock.json

@@ -24,6 +24,7 @@
         "material-react-table": "^3.2.1",
         "prop-types": "^15.8.1",
         "react": "^18.3.1",
+        "react-compiler-runtime": "1.0.0",
         "react-dom": "^18.3.1",
         "react-markdown": "^10.1.0",
         "react-range": "^1.10.0",
@@ -35,11 +36,13 @@
       },
       "devDependencies": {
         "@playwright/experimental-ct-react": "1.61.0",
+        "@rolldown/plugin-babel": "0.2.3",
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^24.10.1",
         "@types/react": "^18.3.23",
         "@types/react-dom": "^18.3.7",
         "@vitejs/plugin-react": "^6.0.3",
+        "babel-plugin-react-compiler": "1.0.0",
         "tsx": "4.22.4",
         "typescript": "^5.9.2",
         "vite": "^8.1.4"
@@ -2626,6 +2629,37 @@
         "node": "^20.19.0 || >=22.12.0"
       }
     },
+    "node_modules/@rolldown/plugin-babel": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/plugin-babel/-/plugin-babel-0.2.3.tgz",
+      "integrity": "sha512-+zEk16yGlz1F9STiRr6uG9hmIXb6nprjLczV/htGptYuLoCuxb+itZ03RKCEeOhBpDDd1NU7qF6x1VLMUp62bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=22.12.0 || ^24.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.29.0 || ^8.0.0-rc.1",
+        "@babel/plugin-transform-runtime": "^7.29.0 || ^8.0.0-rc.1",
+        "@babel/runtime": "^7.27.0 || ^8.0.0-rc.1",
+        "rolldown": "^1.0.0-rc.5",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/plugin-transform-runtime": {
+          "optional": true
+        },
+        "@babel/runtime": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.50.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.50.1.tgz",
@@ -3346,6 +3380,16 @@
         "npm": ">=6"
       }
     },
+    "node_modules/babel-plugin-react-compiler": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz",
+      "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.26.0"
+      }
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -5634,6 +5678,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-compiler-runtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-compiler-runtime/-/react-compiler-runtime-1.0.0.tgz",
+      "integrity": "sha512-rRfjYv66HlG8896yPUDONgKzG5BxZD1nV9U6rkm+7VCuvQc903C4MjcoZR4zPw53IKSOX9wMQVpA1IAbRtzQ7w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",

services/frontend/package.json

@@ -29,6 +29,7 @@
     "material-react-table": "^3.2.1",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
+    "react-compiler-runtime": "1.0.0",
     "react-dom": "^18.3.1",
     "react-markdown": "^10.1.0",
     "react-range": "^1.10.0",
@@ -40,11 +41,13 @@
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.61.0",
+    "@rolldown/plugin-babel": "0.2.3",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.10.1",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^6.0.3",
+    "babel-plugin-react-compiler": "1.0.0",
     "tsx": "4.22.4",
     "typescript": "^5.9.2",
     "vite": "^8.1.4"

services/frontend/src/components/ColorizedCoursesTable/FacultiesTab/index.tsx

@@ -23,6 +23,7 @@ import { useGetFacultiesQuery } from '@/redux/facultyStats'
 import { TotalRow } from '../SemestersTab'
 
 export const FacultiesTab = () => {
+  'use memo'
   const { numberMode, colorMode, selectedSemesters, data } = useColorizedCoursesTableContext()
 
   const { getTextIn } = useLanguage()
@@ -36,7 +37,7 @@ export const FacultiesTab = () => {
         obj[cur.code] = cur.name
         return obj
       }, {}),
-    [facultyQuery?.data]
+    [facultyQuery.data]
   )
 
   const totalRow = useMemo<TotalRow>(() => {
@@ -51,7 +52,9 @@ export const FacultiesTab = () => {
       const facultiesTotal = { ...emptyFields }
       selectedSemesters.forEach(semestercode => {
         data.faculties.forEach(faculty => {
-          course.bySemesters.cellStats[faculty] ??= { ...emptyFields }
+          if (!course.bySemesters.cellStats[faculty]) {
+            course.bySemesters.cellStats[faculty] = { ...emptyFields }
+          }
           const stats = course.bySemesters[semestercode]?.[faculty]
           if (!stats) return
           course.bySemesters.cellStats[faculty].completions += stats.completions

services/frontend/vite.config.ts

@@ -1,5 +1,7 @@
 /* eslint-disable import-x/no-extraneous-dependencies */
-import react from '@vitejs/plugin-react'
+/* eslint-disable no-console */
+import babel from '@rolldown/plugin-babel'
+import react, { reactCompilerPreset } from '@vitejs/plugin-react'
 import path from 'path'
 import { defineConfig } from 'vite'
 
@@ -8,7 +10,38 @@ const inStaging = process.env.REACT_APP_STAGING === 'true'
 // https://vitejs.dev/config/
 // eslint-disable-next-line import-x/no-unused-modules, import-x/no-default-export
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    babel({
+      presets: [
+        reactCompilerPreset({
+          logger: {
+            logEvent(filename, event) {
+              if (event.kind === 'CompileError') {
+                console.error(`\nCompilation failed: ${filename}`)
+                console.error(`Reason: ${event.detail.reason}`)
+
+                if (event.detail.description) {
+                  console.error(`Details: ${event.detail.description}`)
+                }
+
+                if ('loc' in event.detail && !!event.detail.loc) {
+                  const { line, column } = event.detail.loc[Symbol('start')]
+                  console.error(`Location: Line ${line}, Column ${column}`)
+                }
+
+                if (event.detail.suggestions) {
+                  console.error('Suggestions:', event.detail.suggestions)
+                }
+              }
+            },
+          },
+          target: '18',
+          compilationMode: 'annotation',
+        }),
+      ],
+    }),
+  ],
   base: inStaging ? '/oodikone' : '/',
   server: {
     proxy: {