update React 16 to React 19 (#1355)

* update React 16 to React 19

* update type

* update type

* update

* update

* update

* update

* update

* fix

Author: li-jia-nan

docs/examples/animation.tsx

@@ -11,7 +11,7 @@ type MotionBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
 const MotionBody: React.FC<MotionBodyProps> = ({ children, ...props }) => {
   const nodeList = toArray(children);
-  const nodesRef = React.useRef<Record<string, React.ReactElement>>({});
+  const nodesRef = React.useRef<Record<string, React.ReactElement<any>>>({});
 
   // Better apply clean up logic to avoid OOM
   const keys: React.Key[] = [];
@@ -26,7 +26,7 @@ const MotionBody: React.FC<MotionBodyProps> = ({ children, ...props }) => {
       <CSSMotionList keys={keys} component={false} motionName="move">
         {({ key, className }) => {
           const node = nodesRef.current[key];
-          return React.cloneElement(node, {
+          return React.cloneElement<any>(node, {
             className: classNames(node.props.className, className),
           });
         }}

docs/examples/fixedColumnsAndHeaderRtl.tsx

@@ -37,7 +37,7 @@ const useColumn = (
   ellipsis: boolean,
   percentage: boolean,
 ) => {
-  const columns: ColumnsType<RecordType> = React.useMemo(
+  const columns = React.useMemo<ColumnsType<RecordType>>(
     () => [
       {
         title: 'title1',

docs/examples/jsx.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-named-as-default-member */
 import React from 'react';
 import Table from 'rc-table';
 import '../../assets/index.less';

docs/examples/scrollY.tsx

@@ -13,7 +13,7 @@ for (let i = 0; i < 20; i += 1) {
 }
 
 const Test = () => {
-  const tblRef = React.useRef<Reference>();
+  const tblRef = React.useRef<Reference>(null);
   const [showBody, setShowBody] = React.useState(true);
 
   const toggleBody = () => {
@@ -94,7 +94,7 @@ const Test = () => {
         data={data}
         scroll={{ y: 300 }}
         rowKey={record => record.key}
-        onRow={(record, index) => ({ style: { backgroundColor: 'red' } })}
+        onRow={() => ({ style: { backgroundColor: 'red' } })}
       />
       <h3>Column align issue</h3>
       <p>https://github.com/ant-design/ant-design/issues/54889</p>

docs/examples/shadow.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 import type { ColumnsType } from '@/interface';

docs/examples/stickyHeader.tsx

@@ -166,7 +166,7 @@ const columns3: ColumnType<RecordType>[] = [
 ];
 
 const Demo = () => {
-  const container = useRef();
+  const container = useRef(null);
   return (
     <div>
       <h2>Sticky</h2>

docs/examples/virtual-list-grid.tsx

@@ -23,7 +23,7 @@ for (let i = 0; i < 100000; i += 1) {
   });
 }
 const Demo = () => {
-  const gridRef = React.useRef<any>();
+  const gridRef = React.useRef<any>(null);
   const [connectObject] = React.useState<any>(() => {
     const obj = {};
     Object.defineProperty(obj, 'scrollLeft', {

docs/examples/virtual-list.tsx

@@ -33,13 +33,10 @@ const Cell = ({ columnIndex, rowIndex, style }) => (
 );
 
 const Demo = () => {
-  const gridRef = React.useRef<any>();
+  const gridRef = React.useRef<any>(null);
 
   React.useEffect(() => {
-    gridRef.current.resetAfterIndices({
-      columnIndex: 0,
-      shouldForceUpdate: false,
-    });
+    gridRef.current.resetAfterIndices({ columnIndex: 0, shouldForceUpdate: false });
   }, []);
 
   const renderVirtualList = (rawData: object[], { scrollbarSize }: any) => (

docs/examples/virtual.tsx

@@ -189,7 +189,7 @@ const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
 }));
 
 const Demo: React.FC = () => {
-  const tableRef = React.useRef<Reference>();
+  const tableRef = React.useRef<Reference>(null);
   return (
     <div style={{ width: 800, padding: `0 64px` }}>
       <button onClick={() => tableRef.current?.scrollTo({ top: 9999999999999 })}>

package.json

@@ -48,25 +48,23 @@
     "now-build": "npm run docs:build",
     "prepare": "husky"
   },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
-  },
   "dependencies": {
     "@rc-component/context": "^1.4.0",
+    "@rc-component/resize-observer": "^1.0.0",
     "@rc-component/util": "^1.1.0",
     "classnames": "^2.2.5",
-    "@rc-component/resize-observer": "^1.0.0",
     "rc-virtual-list": "^3.14.2"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",
     "@rc-component/np": "^1.0.3",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.4.0",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^19.0.4",
+    "@types/node": "^24.4.0",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
     "@types/responselike": "^1.0.0",
     "@types/styled-components": "^5.1.32",
     "@umijs/fabric": "^4.0.1",
@@ -88,10 +86,10 @@
     "rc-dropdown": "~4.0.1",
     "rc-menu": "~9.16.1",
     "rc-tooltip": "^6.2.0",
-    "react": "^16.0.0",
+    "react": "^19.1.1",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
-    "react-dom": "^16.0.0",
+    "react-dom": "^19.1.1",
     "react-resizable": "^3.0.5",
     "react-virtualized": "^9.12.0",
     "react-window": "^1.8.5",
@@ -100,6 +98,10 @@
     "typescript": "~5.9.2",
     "vitest": "^3.2.4"
   },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
   "lint-staged": {
     "**/*.{js,jsx,tsx,ts,md,json}": [
       "prettier --write"