Try react-compiler

eslint.config.js

@@ -4,7 +4,6 @@ import vitest from '@vitest/eslint-plugin';
 import { defineConfig, globalIgnores } from 'eslint/config';
 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';
@@ -26,7 +25,6 @@ export default defineConfig([
 
     plugins: {
       react,
-      'react-compiler': reactCompiler,
       'react-hooks': reactHooks,
       'react-hooks-extra': reactHooksExtra,
       sonarjs,
@@ -381,14 +379,11 @@ export default defineConfig([
       '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,
       'react-hooks/exhaustive-deps': 1,
+      'react-hooks/react-compiler': 1,
+      'react-hooks/rules-of-hooks': 1,
 
       // React Hooks Extra
       // https://eslint-react.xyz/

package.json

@@ -73,12 +73,12 @@
     "@vitest/eslint-plugin": "^1.1.43",
     "@wyw-in-js/rollup": "^0.6.0",
     "@wyw-in-js/vite": "^0.6.0",
+    "babel-plugin-react-compiler": "19.1.0-rc.1",
     "browserslist": "^4.24.4",
     "eslint": "^9.23.0",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-compiler": "^19.0.0-beta-e993439-20250328",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^6.0.0-rc.1",
     "eslint-plugin-react-hooks-extra": "^1.40.1",
     "eslint-plugin-sonarjs": "^3.0.2",
     "eslint-plugin-testing-library": "^7.1.1",

rolldown.config.js

@@ -3,6 +3,7 @@ import { isAbsolute } from 'node:path';
 import wyw from '@wyw-in-js/rollup';
 import pkg from './package.json' with { type: 'json' };
 import { defineConfig } from 'rolldown';
+import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   input: './src/index.ts',
@@ -15,6 +16,11 @@ export default defineConfig({
   platform: 'browser',
   external: (id) => !id.startsWith('.') && !isAbsolute(id),
   plugins: [
+    react({
+      babel: {
+        plugins: [['babel-plugin-react-compiler', { target: '19' }]]
+      }
+    }),
     // @ts-expect-error
     wyw({
       preprocessor: 'none',

src/Cell.tsx

@@ -1,4 +1,3 @@
-import { memo } from 'react';
 import { css } from '@linaria/core';
 
 import { useRovingTabIndex } from './hooks';
@@ -108,10 +107,8 @@ function Cell<R, SR>({
   );
 }
 
-const CellComponent = memo(Cell) as <R, SR>(props: CellRendererProps<R, SR>) => React.JSX.Element;
-
-export default CellComponent;
+export default Cell;
 
 export function defaultRenderCell<R, SR>(key: React.Key, props: CellRendererProps<R, SR>) {
-  return <CellComponent key={key} {...props} />;
+  return <Cell key={key} {...props} />;
 }

src/DataGrid.tsx

@@ -1,25 +1,18 @@
-import {
-  useCallback,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
+import { useCallback, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
 import type { Key, KeyboardEvent } from 'react';
 import { flushSync } from 'react-dom';
 import clsx from 'clsx';
 
 import {
+  getCalculatedColumns,
+  getViewportColumns,
+  getViewportRows,
   HeaderRowSelectionChangeContext,
   HeaderRowSelectionContext,
   RowSelectionChangeContext,
-  useCalculatedColumns,
   useColumnWidths,
   useGridDimensions,
   useLatestFunc,
-  useViewportColumns,
-  useViewportRows,
   type HeaderRowSelectionContextValue
 } from './hooks';
 import {
@@ -348,12 +341,9 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
       }
     : setColumnWidthsInternal;
 
-  const getColumnWidth = useCallback(
-    (column: CalculatedColumn<R, SR>) => {
-      return columnWidths.get(column.key)?.width ?? column.width;
-    },
-    [columnWidths]
-  );
+  function getColumnWidth(column: CalculatedColumn<R, SR>) {
+    return columnWidths.get(column.key)?.width ?? column.width;
+  }
 
   const [gridRef, gridWidth, gridHeight, horizontalScrollbarHeight] = useGridDimensions();
   const {
@@ -366,7 +356,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     templateColumns,
     layoutCssVars,
     totalFrozenColumnWidth
-  } = useCalculatedColumns({
+  } = getCalculatedColumns({
     rawColumns,
     defaultColumnOptions,
     getColumnWidth,
@@ -405,16 +395,15 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
   const { leftKey, rightKey } = getLeftRightKey(direction);
   const ariaRowCount = rawAriaRowCount ?? headerRowsCount + rows.length + summaryRowsCount;
 
-  const defaultGridComponents = useMemo(
-    () => ({
-      renderCheckbox,
-      renderSortStatus,
-      renderCell
-    }),
-    [renderCheckbox, renderSortStatus, renderCell]
-  );
+  const defaultGridComponents = {
+    renderCheckbox,
+    renderSortStatus,
+    renderCell
+  };
+
+  const headerSelectionValue = getHeaderSelectionValue();
 
-  const headerSelectionValue = useMemo((): HeaderRowSelectionContextValue => {
+  function getHeaderSelectionValue(): HeaderRowSelectionContextValue {
     // no rows to select = explicitely unchecked
     let hasSelectedRow = false;
     let hasUnselectedRow = false;
@@ -435,7 +424,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
       isRowSelected: hasSelectedRow && !hasUnselectedRow,
       isIndeterminate: hasSelectedRow && hasUnselectedRow
     };
-  }, [rows, selectedRows, rowKeyGetter]);
+  }
 
   const {
     rowOverscanStartIdx,
@@ -445,15 +434,15 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     getRowTop,
     getRowHeight,
     findRowIdx
-  } = useViewportRows({
+  } = getViewportRows({
     rows,
     rowHeight,
     clientHeight,
     scrollTop,
     enableVirtualization
   });
 
-  const viewportColumns = useViewportColumns({
+  const viewportColumns = getViewportColumns({
     columns,
     colSpanColumns,
     colOverscanStartIdx,
@@ -506,10 +495,10 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
   /**
    * callbacks
    */
-  const setDraggedOverRowIdx = useCallback((rowIdx?: number) => {
+  function setDraggedOverRowIdx(rowIdx?: number) {
     setOverRowIdx(rowIdx);
     latestDraggedOverRowIdx.current = rowIdx;
-  }, []);
+  }
 
   const focusCellOrCellContent = useCallback(() => {
     const cell = getCellToScroll(gridRef.current!);
@@ -999,7 +988,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     return viewportColumns;
   }
 
-  function getViewportRows() {
+  function renderViewportRows() {
     const rowElements: React.ReactNode[] = [];
 
     const { idx: selectedIdx, rowIdx: selectedRowIdx } = selectedPosition;
@@ -1204,7 +1193,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
               );
             })}
             <RowSelectionChangeContext value={selectRowLatest}>
-              {getViewportRows()}
+              {renderViewportRows()}
             </RowSelectionChangeContext>
             {bottomSummaryRows?.map((row, rowIdx) => {
               const gridRowStart = headerAndTopSummaryRowsCount + rows.length + rowIdx + 1;

src/GroupCell.tsx

@@ -1,5 +1,3 @@
-import { memo } from 'react';
-
 import { useRovingTabIndex } from './hooks';
 import { getCellClassname, getCellStyle } from './utils';
 import type { CalculatedColumn, GroupRow } from './types';
@@ -17,7 +15,7 @@ interface GroupCellProps<R, SR> {
   isGroupByColumn: boolean;
 }
 
-function GroupCell<R, SR>({
+export default function GroupCell<R, SR>({
   id,
   groupKey,
   childRows,
@@ -66,5 +64,3 @@ function GroupCell<R, SR>({
     </div>
   );
 }
-
-export default memo(GroupCell) as <R, SR>(props: GroupCellProps<R, SR>) => React.JSX.Element;

src/GroupRow.tsx

@@ -1,4 +1,3 @@
-import { memo, useMemo } from 'react';
 import { css } from '@linaria/core';
 import clsx from 'clsx';
 
@@ -31,7 +30,7 @@ interface GroupRowRendererProps<R, SR> extends BaseRenderRowProps<R, SR> {
   toggleGroup: (expandedGroupId: unknown) => void;
 }
 
-function GroupedRow<R, SR>({
+export default function GroupedRow<R, SR>({
   className,
   row,
   rowIdx,
@@ -52,10 +51,7 @@ function GroupedRow<R, SR>({
     selectCell({ rowIdx, idx: -1 });
   }
 
-  const selectionValue = useMemo(
-    (): RowSelectionContextValue => ({ isRowSelectionDisabled: false, isRowSelected }),
-    [isRowSelected]
-  );
+  const selectionValue: RowSelectionContextValue = { isRowSelectionDisabled: false, isRowSelected };
 
   return (
     <RowSelectionContext value={selectionValue}>
@@ -95,7 +91,3 @@ function GroupedRow<R, SR>({
     </RowSelectionContext>
   );
 }
-
-export default memo(GroupedRow) as <R, SR>(
-  props: GroupRowRendererProps<R, SR>
-) => React.JSX.Element;

src/GroupedColumnHeaderRow.tsx

@@ -1,5 +1,3 @@
-import { memo } from 'react';
-
 import type { CalculatedColumn, CalculatedColumnParent, Position } from './types';
 import GroupedColumnHeaderCell from './GroupedColumnHeaderCell';
 import { headerRowClassname } from './HeaderRow';
@@ -12,7 +10,7 @@ export interface GroupedColumnHeaderRowProps<R, SR> {
   selectedCellIdx: number | undefined;
 }
 
-function GroupedColumnHeaderRow<R, SR>({
+export default function GroupedColumnHeaderRow<R, SR>({
   rowIdx,
   level,
   columns,
@@ -57,7 +55,3 @@ function GroupedColumnHeaderRow<R, SR>({
     </div>
   );
 }
-
-export default memo(GroupedColumnHeaderRow) as <R, SR>(
-  props: GroupedColumnHeaderRowProps<R, SR>
-) => React.JSX.Element;

src/HeaderRow.tsx

@@ -1,4 +1,4 @@
-import { memo, useId } from 'react';
+import { useId } from 'react';
 import { css } from '@linaria/core';
 import clsx from 'clsx';
 
@@ -47,7 +47,7 @@ const headerRow = css`
 
 export const headerRowClassname = `rdg-header-row ${headerRow}`;
 
-function HeaderRow<R, SR, K extends React.Key>({
+export default function HeaderRow<R, SR, K extends React.Key>({
   headerRowClass,
   rowIdx,
   columns,
@@ -108,7 +108,3 @@ function HeaderRow<R, SR, K extends React.Key>({
     </div>
   );
 }
-
-export default memo(HeaderRow) as <R, SR, K extends React.Key>(
-  props: HeaderRowProps<R, SR, K>
-) => React.JSX.Element;

src/Row.tsx

@@ -1,4 +1,3 @@
-import { memo, useMemo } from 'react';
 import clsx from 'clsx';
 
 import { RowSelectionContext, useLatestFunc, type RowSelectionContextValue } from './hooks';
@@ -83,10 +82,7 @@ function Row<R, SR>({
     }
   }
 
-  const selectionValue = useMemo(
-    (): RowSelectionContextValue => ({ isRowSelected, isRowSelectionDisabled }),
-    [isRowSelectionDisabled, isRowSelected]
-  );
+  const selectionValue: RowSelectionContextValue = { isRowSelected, isRowSelectionDisabled };
 
   return (
     <RowSelectionContext value={selectionValue}>
@@ -103,10 +99,8 @@ function Row<R, SR>({
   );
 }
 
-const RowComponent = memo(Row) as <R, SR>(props: RenderRowProps<R, SR>) => React.JSX.Element;
-
-export default RowComponent;
+export default Row;
 
 export function defaultRenderRow<R, SR>(key: React.Key, props: RenderRowProps<R, SR>) {
-  return <RowComponent key={key} {...props} />;
+  return <Row key={key} {...props} />;
 }

src/SummaryCell.tsx

@@ -1,4 +1,3 @@
-import { memo } from 'react';
 import { css } from '@linaria/core';
 
 import { useRovingTabIndex } from './hooks';
@@ -21,7 +20,7 @@ interface SummaryCellProps<R, SR> extends SharedCellRendererProps<R, SR> {
   row: SR;
 }
 
-function SummaryCell<R, SR>({
+export default function SummaryCell<R, SR>({
   column,
   colSpan,
   row,
@@ -57,5 +56,3 @@ function SummaryCell<R, SR>({
     </div>
   );
 }
-
-export default memo(SummaryCell) as <R, SR>(props: SummaryCellProps<R, SR>) => React.JSX.Element;

src/SummaryRow.tsx

@@ -1,4 +1,3 @@
-import { memo } from 'react';
 import { css } from '@linaria/core';
 import clsx from 'clsx';
 
@@ -50,7 +49,7 @@ const topSummaryRow = css`
 
 const summaryRowClassname = `rdg-summary-row ${summaryRow}`;
 
-function SummaryRow<R, SR>({
+export default function SummaryRow<R, SR>({
   rowIdx,
   gridRowStart,
   row,
@@ -112,5 +111,3 @@ function SummaryRow<R, SR>({
     </div>
   );
 }
-
-export default memo(SummaryRow) as <R, SR>(props: SummaryRowProps<R, SR>) => React.JSX.Element;