bump React from 18 to 19

docs/examples/getScrollBarSize.tsx

@@ -22,9 +22,9 @@ const cssText = `
 `;
 
 export default () => {
-  const defaultRef = React.useRef<HTMLDivElement>();
-  const webkitRef = React.useRef<HTMLDivElement>();
-  const scrollRef = React.useRef<HTMLDivElement>();
+  const defaultRef = React.useRef<HTMLDivElement>(null);
+  const webkitRef = React.useRef<HTMLDivElement>(null);
+  const scrollRef = React.useRef<HTMLDivElement>(null);
   const [sizeData, setSizeData] = React.useState('');
 
   React.useEffect(() => {

docs/examples/portal.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import PortalWrapper from 'rc-util/es/PortalWrapper';
 
 export default () => {
-  const divRef = React.useRef();
-  const outerRef = React.useRef();
+  const divRef = React.useRef<HTMLDivElement>(null);
+  const outerRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
     console.log('>>>', divRef.current);
   }, []);
-  
+
   function getRef() {
     return outerRef.current;
   }

package.json

@@ -39,17 +39,17 @@
   },
   "dependencies": {
     "is-mobile": "^5.0.0",
-    "react-is": "^18.2.0"
+    "react-is": "^19.2.0"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",
     "@rc-component/np": "^1.0.3",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.6.1",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@types/react-is": "^19.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@types/react-is": "^19.2.0",
     "@types/responselike": "^1.0.0",
     "@types/warning": "^3.0.0",
     "@umijs/fabric": "^3.0.0",
@@ -64,10 +64,8 @@
     "lint-staged": "^15.1.0",
     "prettier": "^3.3.2",
     "rc-test": "^7.0.14",
-    "react": "^18.0.0",
-    "react-19": "npm:[email protected]",
-    "react-dom": "^18.0.0",
-    "react-dom-19": "npm:[email protected]",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {

src/Portal.tsx

@@ -14,8 +14,8 @@ export interface PortalProps {
 const Portal = forwardRef<PortalRef, PortalProps>((props, ref) => {
   const { didUpdate, getContainer, children } = props;
 
-  const parentRef = useRef<ParentNode>();
-  const containerRef = useRef<HTMLElement>();
+  const parentRef = useRef<ParentNode>(null);
+  const containerRef = useRef<HTMLElement>(null);
 
   // Ref return nothing, only for wrapper check exist
   useImperativeHandle(ref, () => ({}));

src/hooks/useEvent.ts

@@ -3,7 +3,8 @@
 import * as React from 'react';
 
 function useEvent<T extends Function>(callback: T): T {
-  const fnRef = React.useRef<any>();
+  const fnRef = React.useRef<T>(null);
+
   fnRef.current = callback;
 
   const memoFn = React.useCallback<T>(

tests/ref-19.test.tsx

@@ -3,26 +3,6 @@ import React from 'react';
 import { getNodeRef, useComposeRef, supportRef } from '../src/ref';
 import { render } from '@testing-library/react';
 
-jest.mock('react', () => {
-  const react19 = jest.requireActual('react-19');
-  return react19;
-});
-
-jest.mock('react-dom', () => {
-  const reactDom19 = jest.requireActual('react-dom-19');
-  return reactDom19;
-});
-
-jest.mock('react-dom/client', () => {
-  const reactDom19Client = jest.requireActual('react-dom-19/client');
-  return reactDom19Client;
-});
-
-jest.mock('react-dom/test-utils', () => {
-  const reactDom19Test = jest.requireActual('react-dom-19/test-utils');
-  return reactDom19Test;
-});
-
 describe('ref: React 19', () => {
   const errSpy = jest.spyOn(console, 'error');
 
@@ -59,7 +39,7 @@ describe('ref: React 19', () => {
 
       return (
         <>
-          {React.cloneElement(children, { ref: mergedRef })}
+          {React.cloneElement<any>(children, { ref: mergedRef })}
           <div className="test-output">{childClassName}</div>
         </>
       );

tests/ref.test.tsx

@@ -56,8 +56,9 @@ describe('ref', () => {
       const Demo = () => {
         const [, forceUpdate] = React.useState({});
 
-        const ref1 = React.useRef();
-        const ref2 = React.useRef();
+        const ref1 = React.useRef<HTMLButtonElement>(null);
+        const ref2 = React.useRef<HTMLButtonElement>(null);
+
         const refFn = useEvent(() => {
           count += 1;
         });
@@ -102,7 +103,6 @@ describe('ref', () => {
         </Holder>,
       );
       expect(supportRef(FC)).toBeFalsy();
-      // expect(supportRef(holderRef.current.props.children)).toBeFalsy();
     });
 
     it('arrow function component', () => {
@@ -116,7 +116,7 @@ describe('ref', () => {
         </Holder>,
       );
       expect(supportRef(FC)).toBeFalsy();
-      expect(supportRef(holderRef.current.props.children)).toBeFalsy();
+      expect(supportRef(holderRef.current.props.children)).toBeTruthy(); // React19 ref 收拢到了 props 里面，默认支持
     });
 
     it('forwardRef function component', () => {
@@ -162,7 +162,7 @@ describe('ref', () => {
         </Holder>,
       );
       expect(supportRef(MemoFC)).toBeFalsy();
-      expect(supportRef(holderRef.current.props.children)).toBeFalsy();
+      expect(supportRef(holderRef.current.props.children)).toBeTruthy(); // React19 ref 收拢到了 props 里面，默认支持
     });
 
     it('memo of forwardRef function component', () => {
@@ -195,7 +195,7 @@ describe('ref', () => {
     it('FC', () => {
       const FC = () => <div />;
       const RefFC = React.forwardRef(FC);
-      expect(supportNodeRef(<FC />)).toBeFalsy();
+      expect(supportNodeRef(<FC />)).toBeTruthy(); // React19 ref 收拢到了 props 里面，默认支持
       expect(supportNodeRef(<RefFC />)).toBeTruthy();
     });
 

tests/toArray-19.test.tsx

@@ -2,29 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import toArray from '../src/Children/toArray';
 
-jest.mock('react', () => {
-  const react19 = jest.requireActual('react-19');
-  return react19;
-});
-
-jest.mock('react-dom', () => {
-  const reactDom19 = jest.requireActual('react-dom-19');
-  return reactDom19;
-});
-
-jest.mock('react-dom/client', () => {
-  const reactDom19Client = jest.requireActual('react-dom-19/client');
-  return reactDom19Client;
-});
-
-jest.mock('react-dom/test-utils', () => {
-  const reactDom19Test = jest.requireActual('react-dom-19/test-utils');
-  return reactDom19Test;
-});
-
-class UL extends React.Component<{
-  children?: React.ReactNode;
-}> {
+class UL extends React.Component<React.PropsWithChildren<any>> {
   render() {
     return <ul>{this.props.children}</ul>;
   }