chore: upgrade React 18→19 and fix breaking type changes

- react 18.2.0 to 19.2.6
- react-dom 18.2.0 to 19.2.6
- @types/react 18.2.39 to 19.2.15
- @types/react-dom 18.2.17 to 19.2.3

React 19 breaking changes fixed:
- useRef<T>(null) now returns RefObject<T | null>; cast to
  RefObject<T> at 16 component call sites (safe, runtime unchanged)
- useRef<T>() without arg no longer valid; add | undefined>(undefined)
  in useDebounce, useFileDrop, useThrottle, useVirtualPaginator hooks,
  RoomInput, RoomTimeline, and ClientNonUIFeatures
- useReducer<typeof reducer> 1-arg form removed; drop explicit type arg
  in useForceUpdate (inferred from reducer function)
- global JSX namespace removed; import type { JSX } from react in
  react-custom-html-parser.tsx

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/components/CallEmbedProvider.tsx

@@ -399,7 +399,7 @@ type CallEmbedProviderProps = {
 };
 export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   const callEmbed = useAtomValue(callEmbedAtom);
-  const callEmbedRef = useRef<HTMLDivElement>(null);
+  const callEmbedRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const joined = useCallJoined(callEmbed);
 
   const selectedRoom = useSelectedRoom();

src/app/components/ConfirmPasswordMatch.tsx

@@ -12,8 +12,8 @@ type ConfirmPasswordMatchProps = {
 };
 export function ConfirmPasswordMatch({ initialValue, children }: ConfirmPasswordMatchProps) {
   const [match, setMatch] = useState(initialValue);
-  const passRef = useRef<HTMLInputElement>(null);
-  const confPassRef = useRef<HTMLInputElement>(null);
+  const passRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
+  const confPassRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
 
   const doMatch = useDebounce(
     useCallback(() => {

src/app/components/emoji-board/EmojiBoard.tsx

@@ -421,8 +421,8 @@ export function EmojiBoard({
     { wait: 200 },
   );
 
-  const contentScrollRef = useRef<HTMLDivElement>(null);
-  const virtualBaseRef = useRef<HTMLDivElement>(null);
+  const contentScrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const virtualBaseRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const virtualizer = useVirtualizer({
     count: groups.length,
     getScrollElement: () => contentScrollRef.current,

src/app/features/call/CallView.tsx

@@ -152,7 +152,7 @@ function CallJoined({ joined, containerRef }: CallJoinedProps) {
 
 export function CallView() {
   const room = useRoom();
-  const callContainerRef = useRef<HTMLDivElement>(null);
+  const callContainerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   useCallEmbedPlacementSync(callContainerRef);
 
   const callEmbed = useCallEmbed();

src/app/features/common-settings/members/Members.tsx

@@ -95,9 +95,9 @@ export function Members({ requestClose }: MembersProps) {
   const memberSort = useMemberSort(sortFilterIndex, useMemberSortMenu());
   const memberPowerSort = useMemberPowerSort(creators, getPowerLevel);
 
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
+  const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
 
   const sortedMembers = useMemo(
     () =>

src/app/features/lobby/Lobby.tsx

@@ -159,8 +159,8 @@ export function Lobby() {
   const lex = useMemo(() => new ASCIILexicalTable(' '.charCodeAt(0), '~'.charCodeAt(0), 6), []);
   const members = useRoomMembers(mx, space.roomId);
 
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const heroSectionRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const heroSectionRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const [heroSectionHeight, setHeroSectionHeight] = useState<number>();
   const [spaceRooms, setSpaceRooms] = useAtom(spaceRoomsAtom);
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');

src/app/features/lobby/RoomItem.tsx

@@ -315,8 +315,8 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
     const useAuthentication = useMediaAuthentication();
     const { roomId, content } = item;
     const room = getRoom(roomId);
-    const targetRef = useRef<HTMLDivElement>(null);
-    const targetHandleRef = useRef<HTMLDivElement>(null);
+    const targetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+    const targetHandleRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
     useDraggableItem(item, targetRef, onDragging, targetHandleRef);
 
     const joined = room?.getMyMembership() === Membership.Join;

src/app/features/lobby/SpaceItem.tsx

@@ -429,7 +429,7 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
     const useAuthentication = useMediaAuthentication();
     const { roomId, content } = item;
     const space = getRoom(roomId);
-    const targetRef = useRef<HTMLDivElement>(null);
+    const targetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
     useDraggableItem(item, targetRef, onDragging);
 
     return (

src/app/features/message-search/MessageSearch.tsx

@@ -60,8 +60,8 @@ export function MessageSearch({
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
   const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
 
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
+  const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const [searchParams, setSearchParams] = useSearchParams();
   const searchPathSearchParams = useSearchPathSearchParams(searchParams);
   const { navigateRoom } = useRoomNavigate();

src/app/features/room/MembersDrawer.tsx

@@ -180,9 +180,9 @@ type MembersDrawerProps = {
 export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
+  const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const powerLevels = usePowerLevelsContext();
   const creators = useRoomCreators(room);
   const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);

src/app/features/room/RoomInput.tsx

@@ -176,7 +176,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       roomUploadAtomFamily,
       selectedFiles.map((f) => f.file),
     );
-    const uploadBoardHandlers = useRef<UploadBoardImperativeHandlers>();
+    const uploadBoardHandlers = useRef<UploadBoardImperativeHandlers | undefined>(undefined);
 
     const imagePackRooms: Room[] = useImagePackRooms(roomId, roomToParents);
 

src/app/features/room/RoomTimeline.tsx

@@ -494,7 +494,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
 
   const [unreadInfo, setUnreadInfo] = useState(() => getRoomUnreadInfo(room, true));
-  const readUptoEventIdRef = useRef<string>();
+  const readUptoEventIdRef = useRef<string | undefined>(undefined);
   if (unreadInfo) {
     readUptoEventIdRef.current = unreadInfo.readUptoEventId;
   }

src/app/features/room/RoomView.tsx

@@ -57,8 +57,8 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
 };
 
 export function RoomView({ eventId }: { eventId?: string }) {
-  const roomInputRef = useRef<HTMLDivElement>(null);
-  const roomViewRef = useRef<HTMLDivElement>(null);
+  const roomInputRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const roomViewRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const [chatBackground] = useSetting(settingsAtom, 'chatBackground');
   const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
   const theme = useTheme();

src/app/hooks/useDebounce.ts

@@ -10,7 +10,7 @@ export function useDebounce<T extends unknown[]>(
   callback: DebounceCallback<T>,
   options?: DebounceOptions,
 ): DebounceCallback<T> {
-  const timeoutIdRef = useRef<number>();
+  const timeoutIdRef = useRef<number | undefined>(undefined);
   const { wait, immediate } = options ?? {};
 
   const debounceCallback = useCallback(

src/app/hooks/useFileDrop.ts

@@ -14,7 +14,7 @@ export const useFileDropZone = (
   zoneRef: RefObject<HTMLElement>,
   onDrop: (file: File[]) => void,
 ): boolean => {
-  const dragStateRef = useRef<'start' | 'leave' | 'over'>();
+  const dragStateRef = useRef<'start' | 'leave' | 'over' | undefined>(undefined);
   const [active, setActive] = useState(false);
 
   useEffect(() => {

src/app/hooks/useForceUpdate.ts

@@ -3,7 +3,7 @@ import { useReducer } from 'react';
 const reducer = (prevCount: number): number => prevCount + 1;
 
 export const useForceUpdate = (): [number, () => void] => {
-  const [state, dispatch] = useReducer<typeof reducer>(reducer, 0);
+  const [state, dispatch] = useReducer(reducer, 0);
 
   return [state, dispatch];
 };

src/app/hooks/useThrottle.ts

@@ -11,8 +11,8 @@ export function useThrottle<T extends unknown[]>(
   callback: ThrottleCallback<T>,
   options?: ThrottleOptions,
 ): ThrottleCallback<T> {
-  const timeoutIdRef = useRef<number>();
-  const argsRef = useRef<T>();
+  const timeoutIdRef = useRef<number | undefined>(undefined);
+  const argsRef = useRef<T | undefined>(undefined);
   const { wait, immediate } = options ?? {};
 
   const debounceCallback = useCallback(

src/app/hooks/useVirtualPaginator.ts

@@ -166,16 +166,22 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
 
   const initialRenderRef = useRef(true);
 
-  const restoreScrollRef = useRef<{
-    scrollTop: number;
-    anchorOffsetTop: number;
-    anchorItem: number;
-  }>();
+  const restoreScrollRef = useRef<
+    | {
+        scrollTop: number;
+        anchorOffsetTop: number;
+        anchorItem: number;
+      }
+    | undefined
+  >(undefined);
 
-  const scrollToItemRef = useRef<{
-    index: number;
-    opts?: ScrollToOptions;
-  }>();
+  const scrollToItemRef = useRef<
+    | {
+        index: number;
+        opts?: ScrollToOptions;
+      }
+    | undefined
+  >(undefined);
 
   const propRef = useRef({
     range,

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -130,7 +130,7 @@ function InviteNotifications() {
 
 function MessageNotifications() {
   const audioRef = useRef<HTMLAudioElement>(null);
-  const notifRef = useRef<Notification>();
+  const notifRef = useRef<Notification | undefined>(undefined);
   const unreadCacheRef = useRef<Map<string, UnreadInfo>>(new Map());
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();

src/app/pages/client/SidebarNav.tsx

@@ -20,7 +20,7 @@ import {
 import { CreateTab } from './sidebar/CreateTab';
 
 export function SidebarNav() {
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
 
   return (
     <Sidebar>

src/app/pages/client/explore/Server.tsx

@@ -355,8 +355,8 @@ export function PublicRooms() {
   const [searchParams] = useSearchParams();
   const serverSearchParams = useServerSearchParams(searchParams);
   const isSearch = !!serverSearchParams.term;
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
   const navigate = useNavigate();
   const roomTypeFilters = useRoomTypeFilters();
 

src/app/pages/client/home/Search.tsx

@@ -7,7 +7,7 @@ import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 
 export function HomeSearch() {
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const rooms = useHomeRooms();
   const screenSize = useScreenSizeContext();
 

src/app/pages/client/inbox/Notifications.tsx

@@ -575,8 +575,8 @@ export function Notifications() {
   const { navigateRoom } = useRoomNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
   const notificationsSearchParams = useNotificationsSearchParams(searchParams);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const [refreshIntervalTime, setRefreshIntervalTime] = useState(DEFAULT_REFRESH_MS);
 
   const onlyHighlight = notificationsSearchParams.only === 'highlight';

src/app/pages/client/sidebar/SpaceTabs.tsx

@@ -402,7 +402,7 @@ function SpaceTab({
 }: SpaceTabProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const targetRef = useRef<HTMLDivElement>(null);
+  const targetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
 
   const spaceDraggable: SidebarDraggable = useMemo(
     () =>
@@ -506,8 +506,8 @@ type OpenedSpaceFolderProps = {
   children?: ReactNode;
 };
 function OpenedSpaceFolder({ folder, onClose, children }: OpenedSpaceFolderProps) {
-  const aboveTargetRef = useRef<HTMLDivElement>(null);
-  const belowTargetRef = useRef<HTMLDivElement>(null);
+  const aboveTargetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const belowTargetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
 
   const spaceDraggable: SidebarDraggable = useMemo(() => ({ folder, open: true }), [folder]);
 
@@ -554,7 +554,7 @@ function ClosedSpaceFolder({
 }: ClosedSpaceFolderProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const handlerRef = useRef<HTMLDivElement>(null);
+  const handlerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
 
   const spaceDraggable: FolderDraggable = useMemo(() => ({ folder }), [folder]);
   useDraggableItem(spaceDraggable, handlerRef, onDragging);

src/app/pages/client/space/Search.tsx

@@ -14,7 +14,7 @@ import { BackRouteHandler } from '../../../components/BackRouteHandler';
 
 export function SpaceSearch() {
   const mx = useMatrixClient();
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const space = useSpace();
   const screenSize = useScreenSizeContext();
 

src/app/plugins/react-custom-html-parser.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable jsx-a11y/alt-text */
 import React, {
+  type JSX,
   ComponentPropsWithoutRef,
   ReactEventHandler,
   Suspense,