chore: use react v19 types (#1872)

package.json

@@ -64,8 +64,8 @@
     "@capacitor/status-bar": "^7.0.0",
     "@github/markdown-toolbar-element": "^2.2.3",
     "@ionic/core": "npm:[email protected]",
-    "@ionic/react": "8.4.3",
-    "@ionic/react-router": "8.4.3",
+    "@ionic/react": "8.4.4-dev.11740669619.1b5165be",
+    "@ionic/react-router": "8.4.4-dev.11740669619.1b5165be",
     "@mantine/hooks": "^7.17.0",
     "@reduxjs/toolkit": "^2.6.0",
     "capacitor-android-nav-mode": "^2.0.0",
@@ -131,8 +131,8 @@
     "@types/history": "^4.7.11",
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.13.5",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/ua-parser-js": "^0.7.39",

src/core/GlobalStyles.tsx

@@ -119,7 +119,7 @@ export default function GlobalStyles({ children }: React.PropsWithChildren) {
     Keyboard.setStyle({ style: keyboardStyle });
   }, [isDark, usingSystemDarkMode]);
 
-  return <DarkContext.Provider value={isDark}>{children}</DarkContext.Provider>;
+  return <DarkContext value={isDark}>{children}</DarkContext>;
 }
 
 function useComputeIsDark(): boolean {

src/core/TabContext.tsx

@@ -42,7 +42,5 @@ function TabContextProviderInternals({
     tabRef.current = tab;
   }, [tab]);
 
-  return (
-    <TabContext.Provider value={{ tabRef }}>{children}</TabContext.Provider>
-  );
+  return <TabContext value={{ tabRef }}>{children}</TabContext>;
 }

src/core/listeners/AppUrlListener.tsx

@@ -31,7 +31,7 @@ export default function AppUrlListener() {
   );
   const deepLinkReady = useAppSelector((state) => state.deepLinkReady.ready);
 
-  const appUrlFromEventRef = useRef<string>();
+  const appUrlFromEventRef = useRef<string>(undefined);
 
   const notReady =
     !knownInstances ||

src/features/auth/AppContext.tsx

@@ -9,7 +9,7 @@ import React, {
 } from "react";
 import { VListHandle } from "virtua";
 
-export type Page = RefObject<VListHandle | HTMLElement>;
+export type Page = RefObject<VListHandle | HTMLElement | null>;
 
 interface IAppContext {
   // used for determining whether page needs to be scrolled up first
@@ -23,17 +23,17 @@ export const AppContext = createContext<IAppContext>({
 });
 
 export function AppContextProvider({ children }: React.PropsWithChildren) {
-  const activePageRef = useRef<Page>();
+  const activePageRef = useRef<Page>(undefined);
 
   return (
-    <AppContext.Provider
+    <AppContext
       value={{
         activePageRef,
         setActivePage: (page: Page) => (activePageRef.current = page),
       }}
     >
       {children}
-    </AppContext.Provider>
+    </AppContext>
   );
 }
 

src/features/auth/PageContext.tsx

@@ -47,7 +47,7 @@ export interface BanUserPayload {
 
 interface IPageContext {
   // used for ion presentingElement
-  pageRef: RefObject<HTMLElement | undefined> | undefined;
+  pageRef: RefObject<HTMLElement | null> | undefined;
 
   /**
    * @returns true if login dialog was presented
@@ -124,7 +124,7 @@ interface PageContextProvider extends React.PropsWithChildren {
 export function PageContextProvider({ value, children }: PageContextProvider) {
   const dispatch = useAppDispatch();
   const jwt = useAppSelector(jwtSelector);
-  const reportRef = useRef<ReportHandle>(null);
+  const reportRef = useRef<ReportHandle>(undefined);
   const shareAsImageDataRef = useRef<ShareAsImageData | null>(null);
 
   const [presentShareAsImageModal, onDismissShareAsImageModal] = useIonModal(
@@ -304,7 +304,7 @@ export function PageContextProvider({ value, children }: PageContextProvider) {
   };
 
   return (
-    <PageContext.Provider
+    <PageContext
       value={{
         ...value,
         presentLoginIfNeeded,
@@ -352,6 +352,6 @@ export function PageContextProvider({ value, children }: PageContextProvider) {
         isOpen={isUserTagOpen}
         setIsOpen={setIsUserTagOpen}
       />
-    </PageContext.Provider>
+    </PageContext>
   );
 }

src/features/auth/login/join/Captcha.tsx

@@ -21,7 +21,7 @@ export interface CaptchaHandle {
 
 interface CaptchaProps {
   url: string;
-  ref: React.RefObject<CaptchaHandle>;
+  ref: React.RefObject<CaptchaHandle | undefined>;
 }
 
 export default function Captcha({ url, ref }: CaptchaProps) {

src/features/auth/login/join/Join.tsx

@@ -49,7 +49,7 @@ export default function Join({ answer }: JoinProps) {
   const [email, setEmail] = useState("");
   const [honeypot, setHoneypot] = useState("");
 
-  const captchaRef = useRef<CaptchaHandle>(null);
+  const captchaRef = useRef<CaptchaHandle>(undefined);
 
   useEffect(() => {
     setTimeout(() => {

src/features/comment/Comment.tsx

@@ -67,7 +67,7 @@ export default function Comment({
 
   const canModerate = useCanModerate(commentView.community);
 
-  const commentEllipsisHandleRef = useRef<CommentEllipsisHandle>(null);
+  const commentEllipsisHandleRef = useRef<CommentEllipsisHandle>(undefined);
 
   const stub = isStubComment(comment, canModerate);