Add eslint-plugin-react-compiler

eslint.config.js

@@ -4,6 +4,7 @@ import tsParser from '@typescript-eslint/parser';
 import vitest from '@vitest/eslint-plugin';
 import jestDom from 'eslint-plugin-jest-dom';
 import react from 'eslint-plugin-react';
+import reactCompiler from 'eslint-plugin-react-compiler';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactHooksExtra from 'eslint-plugin-react-hooks-extra';
 import sonarjs from 'eslint-plugin-sonarjs';
@@ -18,6 +19,7 @@ export default [
 
     plugins: {
       react,
+      'react-compiler': reactCompiler,
       'react-hooks': fixupPluginRules(reactHooks),
       'react-hooks-extra': reactHooksExtra,
       sonarjs,
@@ -372,6 +374,10 @@ export default [
       'react/style-prop-object': 0,
       'react/void-dom-elements-no-children': 1,
 
+      // React Compiler
+      // https://react.dev/learn/react-compiler#installing-eslint-plugin-react-compiler
+      'react-compiler/react-compiler': 1,
+
       // React Hooks
       // https://www.npmjs.com/package/eslint-plugin-react-hooks
       'react-hooks/rules-of-hooks': 1,

package.json

@@ -90,6 +90,7 @@
     "eslint": "^9.13.0",
     "eslint-plugin-jest-dom": "^5.0.1",
     "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-8a03594-20241020",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-hooks-extra": "^1.15.0",
     "eslint-plugin-sonarjs": "^2.0.4",

src/DataGrid.tsx

@@ -917,18 +917,22 @@ function DataGrid<R, SR, K extends Key>(
     );
   }
 
+  function cancelEditing() {
+    setSelectedPosition(({ idx, rowIdx }) => ({ idx, rowIdx, mode: 'SELECT' }));
+  }
+
+  function closeEditor(shouldFocusCell: boolean) {
+    shouldFocusCellRef.current = shouldFocusCell;
+    cancelEditing();
+  }
+
   function getCellEditor(rowIdx: number) {
     if (selectedPosition.rowIdx !== rowIdx || selectedPosition.mode === 'SELECT') return;
 
     const { idx, row } = selectedPosition;
     const column = columns[idx];
     const colSpan = getColSpan(column, lastFrozenColumnIndex, { type: 'ROW', row });
 
-    const closeEditor = (shouldFocusCell: boolean) => {
-      shouldFocusCellRef.current = shouldFocusCell;
-      setSelectedPosition(({ idx, rowIdx }) => ({ idx, rowIdx, mode: 'SELECT' }));
-    };
-
     const onRowChange = (row: R, commitChanges: boolean, shouldFocusCell: boolean) => {
       if (commitChanges) {
         // Prevents two issues when editor is closed by clicking on a different cell
@@ -946,7 +950,7 @@ function DataGrid<R, SR, K extends Key>(
 
     if (rows[selectedPosition.rowIdx] !== selectedPosition.originalRow) {
       // Discard changes if rows are updated from outside
-      closeEditor(false);
+      cancelEditing();
     }
 
     return (
@@ -1061,7 +1065,6 @@ function DataGrid<R, SR, K extends Key>(
   // Reset the positions if the current values are no longer valid. This can happen if a column or row is removed
   if (selectedPosition.idx > maxColIdx || selectedPosition.rowIdx > maxRowIdx) {
     setSelectedPosition({ idx: -1, rowIdx: minRowIdx - 1, mode: 'SELECT' });
-    setDraggedOverRowIdx(undefined);
   }
 
   let templateRows = `repeat(${headerRowsCount}, ${headerRowHeight}px)`;
@@ -1245,7 +1248,7 @@ function DataGrid<R, SR, K extends Key>(
         <ScrollToCell
           scrollToPosition={scrollToPosition}
           setScrollToCellPosition={setScrollToPosition}
-          gridElement={gridRef.current!}
+          gridRef={gridRef}
         />
       )}
     </div>

src/ScrollToCell.tsx

@@ -10,11 +10,11 @@ export interface PartialPosition {
 
 export default function ScrollToCell({
   scrollToPosition: { idx, rowIdx },
-  gridElement,
+  gridRef,
   setScrollToCellPosition
 }: {
   scrollToPosition: PartialPosition;
-  gridElement: HTMLDivElement;
+  gridRef: React.RefObject<HTMLDivElement | null>;
   setScrollToCellPosition: (cell: null) => void;
 }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -31,7 +31,7 @@ export default function ScrollToCell({
     }
 
     const observer = new IntersectionObserver(removeScrollToCell, {
-      root: gridElement,
+      root: gridRef.current!,
       threshold: 1.0
     });
 
@@ -40,7 +40,7 @@ export default function ScrollToCell({
     return () => {
       observer.disconnect();
     };
-  }, [gridElement, setScrollToCellPosition]);
+  }, [gridRef, setScrollToCellPosition]);
 
   return (
     <div

src/hooks/useViewportColumns.ts

@@ -36,6 +36,7 @@ export function useViewportColumns<R, SR>({
 
     const updateStartIdx = (colIdx: number, colSpan: number | undefined) => {
       if (colSpan !== undefined && colIdx + colSpan > colOverscanStartIdx) {
+        // eslint-disable-next-line react-compiler/react-compiler
         startIdx = colIdx;
         return true;
       }

website/routes/CommonFeatures.lazy.tsx

@@ -246,17 +246,23 @@ function rowKeyGetter(row: Row) {
   return row.id;
 }
 
+let countries: string[] = [];
+
 function createRows(): readonly Row[] {
   const now = Date.now();
   const rows: Row[] = [];
+  const allCountries = [];
 
   for (let i = 0; i < 1000; i++) {
+    const country = faker.location.country();
+    allCountries.push(country);
+
     rows.push({
       id: i,
       title: `Task #${i + 1}`,
       client: faker.company.name(),
       area: faker.person.jobArea(),
-      country: faker.location.country(),
+      country,
       contact: faker.internet.exampleEmail(),
       assignee: faker.person.fullName(),
       progress: Math.random() * 100,
@@ -270,6 +276,8 @@ function createRows(): readonly Row[] {
     });
   }
 
+  countries = [...new Set(allCountries)].sort(new Intl.Collator().compare);
+
   return rows;
 }
 
@@ -313,12 +321,7 @@ function CommonFeatures() {
   const [selectedRows, setSelectedRows] = useState((): ReadonlySet<number> => new Set());
   const [isExporting, setIsExporting] = useState(false);
   const gridRef = useRef<DataGridHandle>(null);
-
-  const countries = useMemo((): readonly string[] => {
-    return [...new Set(rows.map((r) => r.country))].sort(new Intl.Collator().compare);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const columns = useMemo(() => getColumns(countries, direction), [countries, direction]);
+  const columns = useMemo(() => getColumns(countries, direction), [direction]);
 
   const summaryRows = useMemo((): readonly SummaryRow[] => {
     return [