React 19

.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 '[email protected]'
           git config --global user.name 'GitHub Action'

README.md

@@ -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
@@ -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>
   );
 }
 

eslint.config.js

@@ -563,11 +563,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'],

package.json

@@ -69,8 +69,8 @@
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.0.0",
-    "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
     "@vitejs/plugin-react": "^4.3.4",
@@ -93,10 +93,10 @@
     "playwright": "^1.49.1",
     "postcss": "^8.4.25",
     "prettier": "3.4.2",
-    "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.1",
     "typescript": "~5.7.2",
     "vite": "^6.0.3",

src/Cell.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, type RefAttributes } from 'react';
+import { memo, type RefAttributes } 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,7 +122,7 @@ function Cell<R, SR>(
   );
 }
 
-const CellComponent = memo(forwardRef(Cell)) as <R, SR>(
+const CellComponent = memo(Cell) as <R, SR>(
   props: CellRendererProps<R, SR> & RefAttributes<HTMLDivElement>
 ) => React.JSX.Element;
 

src/DataGrid.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,9 @@ 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, K extends Key>(props: DataGridProps<R, SR, K>) {
   const {
+    ref,
     // Grid and data Props
     columns: rawColumns,
     rows,
@@ -1126,9 +1131,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}
@@ -1156,8 +1161,8 @@ function DataGrid<R, SR, K extends Key>(
               shouldFocusGrid={!selectedCellIsWithinSelectionBounds}
               direction={direction}
             />
-          </HeaderRowSelectionProvider>
-        </HeaderRowSelectionChangeProvider>
+          </HeaderRowSelectionContext>
+        </HeaderRowSelectionChangeContext>
         {rows.length === 0 && noRowsFallback ? (
           noRowsFallback
         ) : (
@@ -1185,10 +1190,10 @@ function DataGrid<R, SR, K extends Key>(
                 />
               );
             })}
-            <RowSelectionChangeProvider value={selectRowLatest}>
+            <RowSelectionChangeContext value={selectRowLatest}>
               {/* eslint-disable-next-line react-compiler/react-compiler */}
               {getViewportRows()}
-            </RowSelectionChangeProvider>
+            </RowSelectionChangeContext>
             {bottomSummaryRows?.map((row, rowIdx) => {
               const gridRowStart = headerAndTopSummaryRowsCount + rows.length + rowIdx + 1;
               const summaryRowIdx = rows.length + rowIdx;
@@ -1221,7 +1226,7 @@ function DataGrid<R, SR, K extends Key>(
             })}
           </>
         )}
-      </DataGridDefaultRenderersProvider>
+      </DataGridDefaultRenderersContext>
 
       {renderDragHandle()}
 
@@ -1264,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/DataGridDefaultRenderersProvider.ts → src/DataGridDefaultRenderersContext.ts

@@ -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/DragHandle.tsx

@@ -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/EditCell.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,

src/GroupRow.tsx

@@ -2,7 +2,7 @@ import { memo, useMemo } from 'react';
 import { css } from '@linaria/core';
 import clsx from 'clsx';
 
-import { RowSelectionProvider, type RowSelectionContextValue } from './hooks';
+import { RowSelectionContext, type RowSelectionContextValue } from './hooks';
 import { getRowStyle } from './utils';
 import type { BaseRenderRowProps, GroupRow } from './types';
 import { SELECT_COLUMN_KEY } from './Columns';
@@ -58,7 +58,7 @@ function GroupedRow<R, SR>({
   );
 
   return (
-    <RowSelectionProvider value={selectionValue}>
+    <RowSelectionContext value={selectionValue}>
       <div
         role="row"
         aria-level={row.level + 1} // aria-level is 1-based
@@ -92,7 +92,7 @@ function GroupedRow<R, SR>({
           />
         ))}
       </div>
-    </RowSelectionProvider>
+    </RowSelectionContext>
   );
 }
 

src/HeaderCell.tsx

@@ -260,7 +260,7 @@ export default function HeaderCell<R, SR>({
     }
   }
 
-  let draggableProps: React.HTMLAttributes<HTMLDivElement> | undefined;
+  let draggableProps: React.ComponentProps<'div'> | undefined;
   if (draggable) {
     draggableProps = {
       draggable: true,