From a5774cccc974e82715516425d39c3c89c9fd6c67 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sun, 4 Jan 2026 15:20:50 +0800
Subject: [PATCH 1/3] update

---
 docs/examples/dynaymicCSS.tsx      |  6 ++++--
 docs/examples/getScrollBarSize.tsx | 18 ++++++++----------
 docs/examples/portal.tsx           | 12 +++++++-----
 src/Portal.tsx                     |  7 ++++---
 src/hooks/useEffect.ts             |  7 +++----
 src/hooks/useLayoutEffect.ts       |  2 +-
 src/hooks/useState.ts              | 12 +++++-------
 src/hooks/useSyncState.ts          |  8 ++++----
 tests/ref.test.tsx                 |  7 ++++---
 9 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/docs/examples/dynaymicCSS.tsx b/docs/examples/dynaymicCSS.tsx
index a11ff899..d77f14ee 100644
--- a/docs/examples/dynaymicCSS.tsx
+++ b/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;
diff --git a/docs/examples/getScrollBarSize.tsx b/docs/examples/getScrollBarSize.tsx
index 5e34da58..b6988f6f 100644
--- a/docs/examples/getScrollBarSize.tsx
+++ b/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;
diff --git a/docs/examples/portal.tsx b/docs/examples/portal.tsx
index a23ed374..50b30c3a 100644
--- a/docs/examples/portal.tsx
+++ b/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;
diff --git a/src/Portal.tsx b/src/Portal.tsx
index 4a79b0e3..1e0b4c88 100644
--- a/src/Portal.tsx
+++ b/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;
diff --git a/src/hooks/useEffect.ts b/src/hooks/useEffect.ts
index 6b8746d9..bfe10249 100644
--- a/src/hooks/useEffect.ts
+++ b/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;
diff --git a/src/hooks/useLayoutEffect.ts b/src/hooks/useLayoutEffect.ts
index a7bc05bd..f3ee4f02 100644
--- a/src/hooks/useLayoutEffect.ts
+++ b/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);
diff --git a/src/hooks/useState.ts b/src/hooks/useState.ts
index ca4dded3..5faf1d55 100644
--- a/src/hooks/useState.ts
+++ b/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;
diff --git a/src/hooks/useSyncState.ts b/src/hooks/useSyncState.ts
index 53318748..5253a705 100644
--- a/src/hooks/useSyncState.ts
+++ b/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;
diff --git a/tests/ref.test.tsx b/tests/ref.test.tsx
index 8f7334ac..78a3014f 100644
--- a/tests/ref.test.tsx
+++ b/tests/ref.test.tsx
@@ -53,11 +53,12 @@ describe('ref', () => {
     it('useComposeRef not changed', () => {
       let count = 0;
 
-      const Demo = () => {
+      const Demo: React.FC = () => {
         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;
         });

From 36e4828e51b925cca28a08050e70cf5c3f0c53bb Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sun, 4 Jan 2026 15:23:36 +0800
Subject: [PATCH 2/3] update @types/react

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 993041c3..3d99b831 100644
--- a/package.json
+++ b/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",

From 8fdaa7dc9046a267a14f6c3e524bfa8e20fa429f Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sun, 4 Jan 2026 15:30:39 +0800
Subject: [PATCH 3/3] update

---
 tests/ref-19.test.tsx     | 8 +++++---
 tests/toArray-19.test.tsx | 6 +-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/tests/ref-19.test.tsx b/tests/ref-19.test.tsx
index 775fb317..b51d2ce4 100644
--- a/tests/ref-19.test.tsx
+++ b/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>;
     };
diff --git a/tests/toArray-19.test.tsx b/tests/toArray-19.test.tsx
index 2d9f7a06..39e83419 100644
--- a/tests/toArray-19.test.tsx
+++ b/tests/toArray-19.test.tsx
@@ -22,9 +22,7 @@ jest.mock('react-dom/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>;
   }
@@ -33,7 +31,6 @@ class UL extends React.Component<{
 describe('toArray', () => {
   it('Fragment', () => {
     const ulRef = React.createRef<UL>();
-
     render(
       <UL ref={ulRef}>
         <li key="1">1</li>
@@ -49,7 +46,6 @@ describe('toArray', () => {
         </React.Fragment>
       </UL>,
     );
-
     const children = toArray(ulRef.current.props.children);
     expect(children).toHaveLength(5);
     expect(children.map(c => c.key)).toEqual(['1', '2', '3', '4', '5']);