Drop support for React 18 (#3503)

* React 19

* beta -> rc

* remove patch script

* -forwardRef

* use ComponentProps

* import useLayoutEffect directly

* use contexts directly

* fix lint

* cleanup useRef type

* add missing exports

* use stable React 19

* provider -> context

* -1 forwardRef

* add forceConsistentCasingInFileNames

* bump

* remove reference to old vitest.workspace.ts

* update deps

* remove unnecessary RefAttributes

* fix types

* apply same fix to TreeDataGrid

* update chromium issue links

* remove unused ref

---------

Co-authored-by: Aman Mahajan <amahajan@stratag.com>
Co-authored-by: Aman Mahajan <amahajan@freewheel.tv>

Author: nstepien

.github/workflows/ci.yml

@@ -8,21 +8,12 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        react: [18, 19]
-      fail-fast: false
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 23
           check-latest: true
-      - name: set up react 19
-        if: matrix.react == 19
-        run: |
-          node ./.github/workflows/patch-react19.js
-          cat package.json
       - name: npm install
         run: npm i
       - name: Biome
@@ -45,12 +36,11 @@ jobs:
         run: node --run test
         timeout-minutes: 4
       - name: Upload coverage
-        if: matrix.react == 18
         uses: codecov/codecov-action@v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
       - name: Deploy gh-pages
-        if: matrix.react == 18 && github.event_name == 'push' && github.ref == 'refs/heads/main'
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
         run: |
           git config --global user.email 'action@github.com'
           git config --global user.name 'GitHub Action'

.github/workflows/patch-react19.js

@@ -18,7 +18,7 @@
 
 ## Features
 
-- [React 18.0+](package.json) support
+- [React 19.0+](package.json) support
 - [Evergreen browsers and server-side rendering](browserslist) support
 - Tree-shaking support and only [one npm dependency](package.json) to keep your bundles slim
 - Great performance thanks to virtualization: columns and rows outside the viewport are not rendered
@@ -42,7 +42,7 @@
 - [Cell copy / pasting](https://adazzle.github.io/react-data-grid/#/AllFeatures)
 - [Cell value dragging / filling](https://adazzle.github.io/react-data-grid/#/AllFeatures)
 - [Customizable Renderers](https://adazzle.github.io/react-data-grid/#/CustomizableRenderers)
-- Right-to-left (RTL) support. We recommend using Firefox as Chrome has a [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1140374) with frozen columns.
+- Right-to-left (RTL) support. We recommend using Firefox as Chrome has a [bug](https://issues.chromium.org/issues/40653832) with frozen columns.
 
 ## Links
 
@@ -419,16 +419,16 @@ interface Renderers<TRow, TSummaryRow> {
 }
 ```
 
-For example, the default `<Row />` component can be wrapped via the `renderRow` prop to add context providers or tweak props
+For example, the default `<Row />` component can be wrapped via the `renderRow` prop to add contexts or tweak props
 
 ```tsx
 import DataGrid, { RenderRowProps, Row } from 'react-data-grid';
 
 function myRowRenderer(key: React.Key, props: RenderRowProps<Row>) {
   return (
-    <MyContext.Provider key={key} value={123}>
+    <MyContext key={key} value={123}>
       <Row {...props} />
-    </MyContext.Provider>
+    </MyContext>
   );
 }
 

README.md

@@ -564,11 +564,6 @@ export default [
           importNames: ['default'],
           message: 'Use named imports instead.'
         },
-        {
-          name: 'react',
-          importNames: ['useLayoutEffect'],
-          message: 'Use the override from src/hooks instead.'
-        },
         {
           name: 'react-dom',
           importNames: ['default'],

eslint.config.js

@@ -69,8 +69,8 @@
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.12.0",
-    "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@typescript-eslint/eslint-plugin": "^8.22.0",
     "@typescript-eslint/parser": "^8.22.0",
     "@vitejs/plugin-react": "^4.3.4",
@@ -93,10 +93,10 @@
     "playwright": "^1.50.0",
     "postcss": "^8.5.1",
     "prettier": "3.5.0",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "rolldown": "^1.0.0-beta.3",
     "typescript": "~5.7.3",
     "vite": "^6.0.11",

package.json

@@ -1,4 +1,4 @@
-import { forwardRef, memo, type RefAttributes } from 'react';
+import { memo } from 'react';
 import { css } from '@linaria/core';
 
 import { useRovingTabIndex } from './hooks';
@@ -25,26 +25,23 @@ const cellDraggedOver = css`
 
 const cellDraggedOverClassname = `rdg-cell-dragged-over ${cellDraggedOver}`;
 
-function Cell<R, SR>(
-  {
-    column,
-    colSpan,
-    isCellSelected,
-    isCopied,
-    isDraggedOver,
-    row,
-    rowIdx,
-    className,
-    onClick,
-    onDoubleClick,
-    onContextMenu,
-    onRowChange,
-    selectCell,
-    style,
-    ...props
-  }: CellRendererProps<R, SR>,
-  ref: React.Ref<HTMLDivElement>
-) {
+function Cell<R, SR>({
+  column,
+  colSpan,
+  isCellSelected,
+  isCopied,
+  isDraggedOver,
+  row,
+  rowIdx,
+  className,
+  onClick,
+  onDoubleClick,
+  onContextMenu,
+  onRowChange,
+  selectCell,
+  style,
+  ...props
+}: CellRendererProps<R, SR>) {
   const { tabIndex, childTabIndex, onFocus } = useRovingTabIndex(isCellSelected);
 
   const { cellClass } = column;
@@ -101,7 +98,6 @@ function Cell<R, SR>(
       aria-colspan={colSpan}
       aria-selected={isCellSelected}
       aria-readonly={!isEditable || undefined}
-      ref={ref}
       tabIndex={tabIndex}
       className={className}
       style={{
@@ -126,9 +122,7 @@ function Cell<R, SR>(
   );
 }
 
-const CellComponent = memo(forwardRef(Cell)) as <R, SR>(
-  props: CellRendererProps<R, SR> & RefAttributes<HTMLDivElement>
-) => React.JSX.Element;
+const CellComponent = memo(Cell) as <R, SR>(props: CellRendererProps<R, SR>) => React.JSX.Element;
 
 export default CellComponent;
 

src/Cell.tsx

@@ -1,17 +1,23 @@
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import type { Key, KeyboardEvent, RefAttributes } from 'react';
+import {
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import type { Key, KeyboardEvent } from 'react';
 import { flushSync } from 'react-dom';
 import clsx from 'clsx';
 
 import {
-  HeaderRowSelectionChangeProvider,
-  HeaderRowSelectionProvider,
-  RowSelectionChangeProvider,
+  HeaderRowSelectionChangeContext,
+  HeaderRowSelectionContext,
+  RowSelectionChangeContext,
   useCalculatedColumns,
   useColumnWidths,
   useGridDimensions,
   useLatestFunc,
-  useLayoutEffect,
   useViewportColumns,
   useViewportRows,
   type HeaderRowSelectionContextValue
@@ -55,9 +61,9 @@ import type {
 import { defaultRenderCell } from './Cell';
 import { renderCheckbox as defaultRenderCheckbox } from './cellRenderers';
 import {
-  DataGridDefaultRenderersProvider,
+  DataGridDefaultRenderersContext,
   useDefaultRenderers
-} from './DataGridDefaultRenderersProvider';
+} from './DataGridDefaultRenderersContext';
 import DragHandle from './DragHandle';
 import EditCell from './EditCell';
 import GroupedColumnHeaderRow from './GroupedColumnHeaderRow';
@@ -97,7 +103,7 @@ export interface DataGridHandle {
 }
 
 type SharedDivProps = Pick<
-  React.HTMLAttributes<HTMLDivElement>,
+  React.ComponentProps<'div'>,
   | 'role'
   | 'aria-label'
   | 'aria-labelledby'
@@ -109,6 +115,7 @@ type SharedDivProps = Pick<
 >;
 
 export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends SharedDivProps {
+  ref?: Maybe<React.Ref<DataGridHandle>>;
   /**
    * Grid and data Props
    */
@@ -215,11 +222,11 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
  *
  * <DataGrid columns={columns} rows={rows} />
  */
-function DataGrid<R, SR, K extends Key>(
-  props: DataGridProps<R, SR, K>,
-  ref: React.Ref<DataGridHandle>
+export default function DataGrid<R, SR = unknown, K extends Key = Key>(
+  props: DataGridProps<R, SR, K>
 ) {
   const {
+    ref,
     // Grid and data Props
     columns: rawColumns,
     rows,
@@ -1125,9 +1132,9 @@ function DataGrid<R, SR, K extends Key>(
       data-testid={testId}
       data-cy={dataCy}
     >
-      <DataGridDefaultRenderersProvider value={defaultGridComponents}>
-        <HeaderRowSelectionChangeProvider value={selectHeaderRowLatest}>
-          <HeaderRowSelectionProvider value={headerSelectionValue}>
+      <DataGridDefaultRenderersContext value={defaultGridComponents}>
+        <HeaderRowSelectionChangeContext value={selectHeaderRowLatest}>
+          <HeaderRowSelectionContext value={headerSelectionValue}>
             {Array.from({ length: groupedColumnHeaderRowsCount }, (_, index) => (
               <GroupedColumnHeaderRow
                 key={index}
@@ -1155,8 +1162,8 @@ function DataGrid<R, SR, K extends Key>(
               shouldFocusGrid={!selectedCellIsWithinSelectionBounds}
               direction={direction}
             />
-          </HeaderRowSelectionProvider>
-        </HeaderRowSelectionChangeProvider>
+          </HeaderRowSelectionContext>
+        </HeaderRowSelectionChangeContext>
         {rows.length === 0 && noRowsFallback ? (
           noRowsFallback
         ) : (
@@ -1184,9 +1191,9 @@ function DataGrid<R, SR, K extends Key>(
                 />
               );
             })}
-            <RowSelectionChangeProvider value={selectRowLatest}>
+            <RowSelectionChangeContext value={selectRowLatest}>
               {getViewportRows()}
-            </RowSelectionChangeProvider>
+            </RowSelectionChangeContext>
             {bottomSummaryRows?.map((row, rowIdx) => {
               const gridRowStart = headerAndTopSummaryRowsCount + rows.length + rowIdx + 1;
               const summaryRowIdx = rows.length + rowIdx;
@@ -1219,7 +1226,7 @@ function DataGrid<R, SR, K extends Key>(
             })}
           </>
         )}
-      </DataGridDefaultRenderersProvider>
+      </DataGridDefaultRenderersContext>
 
       {renderDragHandle()}
 
@@ -1262,7 +1269,3 @@ function getCellToScroll(gridEl: HTMLDivElement) {
 function isSamePosition(p1: Position, p2: Position) {
   return p1.idx === p2.idx && p1.rowIdx === p2.rowIdx;
 }
-
-export default forwardRef(DataGrid) as <R, SR = unknown, K extends Key = Key>(
-  props: DataGridProps<R, SR, K> & RefAttributes<DataGridHandle>
-) => React.JSX.Element;

src/DataGrid.tsx

@@ -3,9 +3,7 @@ import { createContext, useContext } from 'react';
 import type { Maybe, Renderers } from './types';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const DataGridDefaultRenderersContext = createContext<Maybe<Renderers<any, any>>>(undefined);
-
-export const DataGridDefaultRenderersProvider = DataGridDefaultRenderersContext.Provider;
+export const DataGridDefaultRenderersContext = createContext<Maybe<Renderers<any, any>>>(undefined);
 
 export function useDefaultRenderers<R, SR>(): Maybe<Renderers<R, SR>> {
   return useContext(DataGridDefaultRenderersContext);

src/DataGridDefaultRenderersProvider.ts src/DataGridDefaultRenderersContext.tssrc/DataGridDefaultRenderersProvider.ts renamed to src/DataGridDefaultRenderersContext.ts

@@ -32,19 +32,14 @@ const cellDragHandleFrozenClassname = css`
 
 const cellDragHandleClassname = `rdg-cell-drag-handle ${cellDragHandle}`;
 
-// TODO: replace with RefObject once we drop support for React 18
-interface LatestDraggedOverRowIdxRef {
-  readonly current: number | undefined;
-}
-
 interface Props<R, SR> extends Pick<DataGridProps<R, SR>, 'rows' | 'onRowsChange'> {
   gridRowStart: number;
   column: CalculatedColumn<R, SR>;
   columnWidth: number | string;
   maxColIdx: number;
   isLastRow: boolean;
   selectedPosition: SelectCellState;
-  latestDraggedOverRowIdx: LatestDraggedOverRowIdxRef;
+  latestDraggedOverRowIdx: React.RefObject<number | undefined>;
   isCellEditable: (position: Position) => boolean;
   onClick: () => void;
   onFill: (event: FillEvent<R>) => R;

src/DragHandle.tsx

@@ -56,7 +56,7 @@ export default function EditCell<R, SR>({
   onKeyDown,
   navigate
 }: EditCellProps<R, SR>) {
-  const frameRequestRef = useRef<number | undefined>(undefined);
+  const frameRequestRef = useRef<number>(undefined);
   const commitOnOutsideClick = column.editorOptions?.commitOnOutsideClick !== false;
 
   // We need to prevent the `useEffect` from cleaning up between re-renders,