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": "^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:react@19.0.0",
- "react-dom": "^18.0.0",
- "react-dom-19": "npm:react-dom@19.0.0",
+ "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;
  });