Remove memo and use 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.44",
     "@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.5",
     "eslint": "^9.26.0",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-compiler": "^19.1.0-rc.1",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^6.0.0-rc.1",
     "eslint-plugin-react-hooks-extra": "^1.49.0",
     "eslint-plugin-sonarjs": "^3.0.2",
     "eslint-plugin-testing-library": "^7.1.1",

rolldown.config.js

@@ -2,6 +2,7 @@
 import { isAbsolute } from 'node:path';
 import wyw from '@wyw-in-js/rollup';
 import pkg from './package.json' with { type: 'json' };
+import react from '@vitejs/plugin-react';
 import { defineConfig } from 'rolldown';
 
 export default defineConfig({
@@ -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,4 @@
-import { memo, type MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
 import { css } from '@linaria/core';
 
 import { useRovingTabIndex } from './hooks';
@@ -126,10 +126,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/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,
@@ -70,5 +68,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,4 @@
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 import { css } from '@linaria/core';
 import clsx from 'clsx';
 
@@ -31,7 +31,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,
@@ -95,7 +95,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';
 
@@ -46,7 +46,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,
@@ -105,7 +105,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,4 @@
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 import clsx from 'clsx';
 
 import { RowSelectionContext, useLatestFunc, type RowSelectionContextValue } from './hooks';
@@ -101,10 +101,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;

src/hooks/useViewportColumns.ts

@@ -36,7 +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
+        // eslint-disable-next-line react-hooks/react-compiler
         startIdx = colIdx;
         return true;
       }

vite.config.ts

@@ -62,7 +62,10 @@ export default defineConfig(({ command }) => ({
         autoCodeSplitting: true
       }),
     react({
-      exclude: ['./.cache/**/*']
+      exclude: ['./.cache/**/*'],
+      babel: {
+        plugins: [['babel-plugin-react-compiler', { target: '19' }]]
+      }
     }),
     wyw({
       exclude: ['./.cache/**/*'],