chore: bump @types/react from 18 to 19 (#690)

* update

* update @types/react

* update

Author: li-jia-nan

docs/examples/dynaymicCSS.tsx

@@ -11,9 +11,9 @@ function injectStyle(id: number, prepend?: Prepend, priority?: number) {
   });
 }
 
-export default () => {
+const Demo = () => {
   const [id, setId] = React.useState(0);
-  const idRef = React.useRef(id);
+  const idRef = React.useRef<number>(id);
   idRef.current = id;
 
   // Clean up
@@ -55,3 +55,5 @@ export default () => {
     </>
   );
 };
+
+export default Demo;

docs/examples/getScrollBarSize.tsx

@@ -21,10 +21,11 @@ const cssText = `
 }
 `;
 
-export default () => {
-  const defaultRef = React.useRef<HTMLDivElement>();
-  const webkitRef = React.useRef<HTMLDivElement>();
-  const scrollRef = React.useRef<HTMLDivElement>();
+const Demo = () => {
+  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(() => {
@@ -45,12 +46,7 @@ export default () => {
 
   return (
     <div>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: cssText,
-        }}
-      />
-
+      <style dangerouslySetInnerHTML={{ __html: cssText }} />
       <div
         style={{
           width: 300,
@@ -87,3 +83,5 @@ export default () => {
     </div>
   );
 };
+
+export default Demo;

docs/examples/portal.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import PortalWrapper from 'rc-util/es/PortalWrapper';
 
-export default () => {
-  const divRef = React.useRef();
-  const outerRef = React.useRef();
+const Demo: React.FC = () => {
+  const divRef = React.useRef<HTMLDivElement>(null);
+  const outerRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
     console.log('>>>', divRef.current);
   }, []);
-  
+
   function getRef() {
     return outerRef.current;
   }
@@ -18,7 +18,9 @@ export default () => {
       <PortalWrapper visible getContainer={getRef}>
         {() => <div ref={divRef}>2333</div>}
       </PortalWrapper>
-      <div style={{ background: 'red', height: 20 }} ref={outerRef} />
+      <div style={{ backgroundColor: 'red', height: 20 }} ref={outerRef} />
     </>
   );
 };
+
+export default Demo;

package.json

@@ -47,7 +47,7 @@
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.6.1",
-    "@types/react": "^18.0.0",
+    "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.2",
     "@types/react-is": "^19.0.0",
     "@types/responselike": "^1.0.0",

src/Portal.tsx

@@ -14,14 +14,15 @@ 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, () => ({}));
 
   // Create container in client side with sync to avoid useEffect not get ref
-  const initRef = useRef(false);
+  const initRef = useRef<boolean>(false);
+
   if (!initRef.current && canUseDom()) {
     containerRef.current = getContainer();
     parentRef.current = containerRef.current.parentNode;

src/hooks/useEffect.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 
 /** As `React.useEffect` but pass origin value in callback and not need care deps length change. */
-export default function useEffect(
-  callback: (prevDeps: any[]) => void,
-  deps: any[],
-) {
+function useEffect(callback: (prevDeps: any[]) => void, deps: any[]) {
   const prevRef = React.useRef(deps);
   React.useEffect(() => {
     if (
@@ -16,3 +13,5 @@ export default function useEffect(
     prevRef.current = deps;
   });
 }
+
+export default useEffect;

src/hooks/useLayoutEffect.ts

@@ -13,7 +13,7 @@ const useLayoutEffect = (
   callback: (mount: boolean) => void | VoidFunction,
   deps?: React.DependencyList,
 ) => {
-  const firstMountRef = React.useRef(true);
+  const firstMountRef = React.useRef<boolean>(true);
 
   useInternalLayoutEffect(() => {
     return callback(firstMountRef.current);

src/hooks/useState.ts

@@ -16,15 +16,12 @@ export type SetState<T> = (
  * We do not make this auto is to avoid real memory leak.
  * Developer should confirm it's safe to ignore themselves.
  */
-export default function useSafeState<T>(
-  defaultValue?: T | (() => T),
-): [T, SetState<T>] {
-  const destroyRef = React.useRef(false);
+const useSafeState = <T>(defaultValue?: T | (() => T)): [T, SetState<T>] => {
+  const destroyRef = React.useRef<boolean>(false);
   const [value, setValue] = React.useState(defaultValue);
 
   React.useEffect(() => {
     destroyRef.current = false;
-
     return () => {
       destroyRef.current = true;
     };
@@ -34,9 +31,10 @@ export default function useSafeState<T>(
     if (ignoreDestroy && destroyRef.current) {
       return;
     }
-
     setValue(updater);
   }
 
   return [value, safeSetState];
-}
+};
+
+export default useSafeState;

src/hooks/useSyncState.ts

@@ -10,12 +10,10 @@ export type SetState<T> = (nextValue: Updater<T>) => void;
  * This is useful when React merge multiple state updates into one.
  * e.g. onTransitionEnd trigger multiple event at once will be merged state update in React.
  */
-export default function useSyncState<T>(
-  defaultValue?: T,
-): [get: () => T, set: SetState<T>] {
+function useSyncState<T>(defaultValue?: T): [get: () => T, set: SetState<T>] {
   const [, forceUpdate] = React.useReducer(x => x + 1, 0);
 
-  const currentValueRef = React.useRef(defaultValue);
+  const currentValueRef = React.useRef<T>(defaultValue);
 
   const getValue = useEvent(() => {
     return currentValueRef.current;
@@ -32,3 +30,5 @@ export default function useSyncState<T>(
 
   return [getValue, setValue];
 }
+
+export default useSyncState;

tests/ref-19.test.tsx

@@ -45,7 +45,7 @@ describe('ref: React 19', () => {
   });
 
   it('useComposeRef', () => {
-    const Demo = ({ children }: { children: React.ReactElement }) => {
+    const Demo: React.FC<React.PropsWithChildren> = ({ children }) => {
       const ref = React.useRef<HTMLDivElement>(null);
       const childRef = getNodeRef(children); // Should get child real `ref` props
       const mergedRef = useComposeRef(ref, childRef);
@@ -59,7 +59,10 @@ describe('ref: React 19', () => {
 
       return (
         <>
-          {React.cloneElement(children, { ref: mergedRef })}
+          {React.cloneElement<{ ref?: any }>(
+            children as React.ReactElement<any>,
+            { ref: mergedRef },
+          )}
           <div className="test-output">{childClassName}</div>
         </>
       );
@@ -79,7 +82,6 @@ describe('ref: React 19', () => {
 
   it('supportRef with not provide ref', () => {
     const Empty = () => <div />;
-
     const Checker = ({ children }: { children: React.ReactElement }) => {
       return <p>{String(supportRef(children))}</p>;
     };