bump React from 18 to 19

Author: li-jia-nan

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": "^29.4.0",
     "@types/node": "^22.5.5",
-    "@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

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