Skip to content

Commit 86d45bf

Browse files
authored
Add React Compiler with incremental adoption strategy (#1489)
## Description Added React Compiler to improve performance and catch potential bugs at build time. This PR introduces the React Compiler with an incremental adoption approach, starting with the `src/components/Home/RunSection` directory. The compiler helps optimize React components by eliminating unnecessary re-renders and catching common React issues. Docs: https://react.dev/learn/react-compiler/incremental-adoption https://react.dev/learn/react-compiler/installation ## Type of Change - [x] Improvement - [x] Performance optimization ## Checklist - [x] I have tested this does not break current pipelines / runs functionality - [x] I have tested the changes on staging ## Implementation Details - Added `babel-plugin-react-compiler` and `eslint-plugin-react-compiler` dependencies - Configured ESLint to warn (not error) on React Compiler violations - Set up directory-based incremental adoption in Vite config - Fixed several components to be compiler-compatible: - Removed unnecessary `useCallback` in `RunRow.tsx` - Fixed hook dependencies in `useAwaitAuthorization.ts` - Improved state management in `sidebar.tsx` - Fixed formatting in several UI components ## Test Instructions 1. Run the application and verify the Home page loads correctly 2. Check that the Runs section functions as expected 3. Verify there are no console errors related to React Compiler ## Additional Comments This is the first step in adopting React Compiler across the codebase. More directories will be added incrementally as they are cleaned up for compiler compatibility.
1 parent 0e6a309 commit 86d45bf

File tree

10 files changed

+296
-89
lines changed

10 files changed

+296
-89
lines changed

eslint.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import pluginJs from "@eslint/js";
22
import pluginReact from "eslint-plugin-react";
3+
import reactCompiler from "eslint-plugin-react-compiler";
34
import simpleImportSort from "eslint-plugin-simple-import-sort";
45
import globals from "globals";
56
import tseslint from "typescript-eslint";
@@ -28,6 +29,7 @@ export default [
2829
],
2930
"simple-import-sort/imports": "warn",
3031
"simple-import-sort/exports": "warn",
32+
"react-compiler/react-compiler": "error",
3133
"no-restricted-imports": [
3234
"error",
3335
{
@@ -54,6 +56,7 @@ export default [
5456
},
5557
plugins: {
5658
"simple-import-sort": simpleImportSort,
59+
"react-compiler": reactCompiler,
5760
},
5861
},
5962
{

0 commit comments

Comments
 (0)