chore(deps): update react monorepo to v19 (major)

package.json

@@ -106,17 +106,17 @@
     "@storybook/react": "^10.3.5",
     "@storybook/test": "9.0.0-alpha.2",
     "@types/node": "~24.12.2",
-    "@types/react": "^18.3.28",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "antd": "^6.3.6",
     "chromatic": "^16.3.0",
     "execa": "9.6.1",
     "fs-extra": "11.3.4",
     "lottie-web": "5.13.0",
     "nano-staged": "^0.9.0",
     "prettier": "~3.8.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "rimraf": "~6.1.3",
     "semver": "7.7.4",
     "simple-git-hooks": "^2.13.1",

src/blog-list/index.tsx

@@ -1,4 +1,9 @@
-import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import type {
+  AnchorHTMLAttributes,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+} from 'react';
 import { useMemo, useState } from 'react';
 import { type BlogAvatarAuthor, BlogAvatarGroup } from '../blog-avatar';
 import { ALink, type LinkComp } from '../shared';
@@ -200,7 +205,7 @@ function MarkdownishText({
 type BlogCardProps = {
   post: BlogListItem;
   isFeatured: boolean;
-  Link: (props: LinkLikeProps) => JSX.Element;
+  Link: (props: LinkLikeProps) => ReactElement;
   dateFormatter: Intl.DateTimeFormat;
   interactive: boolean;
   renderInlineMarkdown?: RenderInlineMarkdown;
@@ -297,7 +302,7 @@ export function BlogList({
     return emptyState ? <>{emptyState}</> : null;
   }
 
-  const Link = (LinkComp ?? ALink) as (props: LinkLikeProps) => JSX.Element;
+  const Link = (LinkComp ?? ALink) as (props: LinkLikeProps) => ReactElement;
   const dateFormatter = new Intl.DateTimeFormat(
     lang === 'zh' ? 'zh-CN' : 'en-US',
     dateFormatOptions,

src/hero/BackgroundStar.tsx

@@ -14,7 +14,7 @@ const BackgroundStar = ({
   pageY: number | null;
   size: number;
 }) => {
-  const ref = useRef<any>();
+  const ref = useRef<HTMLDivElement | null>(null);
   const [transformX, setTransformX] = useState<number>(0);
   const [transformY, setTransformY] = useState<number>(0);
   useEffect(() => {

src/hero/index.tsx

@@ -42,7 +42,7 @@ const positions = [
 ];
 
 const useMouseMove = () => {
-  const ref = useRef<any>();
+  const ref = useRef<HTMLElement | null>(null);
   const [pageX, setPageX] = useState<null | number>(null);
   const [pageY, setPageY] = useState<null | number>(null);
 

src/shared.tsx

@@ -1,12 +1,12 @@
-import type { AnchorHTMLAttributes, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, ReactElement, ReactNode } from 'react';
 
 export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   className: string;
   href: string;
   children: ReactNode;
 };
 
-export type LinkComp = (props: LinkProps) => JSX.Element;
+export type LinkComp = (props: LinkProps) => ReactElement;
 
 /**
  * A backup link component, import { Link } from '@rspress/core/theme' to replace it

src/why-rspack/useCardAnimation.tsx

@@ -4,7 +4,7 @@ export const useCardAnimation = () => {
   const [pageX, setPageX] = useState<null | number>(null);
   const [pageY, setPageY] = useState<null | number>(null);
   const [isHovering, setIsHovering] = useState(false);
-  const ref = useRef<HTMLElement>();
+  const ref = useRef<HTMLElement | null>(null);
 
   const handleMove = ({ pageX, pageY }: { pageX: number; pageY: number }) => {
     setPageX(pageX);

src/why-rspack/useLottieAnimation.tsx

@@ -6,9 +6,9 @@ export const useLottieAnimation = (
   isHovering: boolean,
   lottieJsonData?: string,
 ) => {
-  const ref = useRef();
+  const ref = useRef<HTMLDivElement | null>(null);
 
-  const animationRef = useRef<AnimationItem>();
+  const animationRef = useRef<AnimationItem | null>(null);
 
   useEffect(() => {
     if (!ref.current) {