Type fixes for react v19 compatibility

Two things:

- import `JSX` rather than expecting it to be a global namespace
- require a default value for `useRef`

I found these whilst working on #2874

Author: hughns

src/App.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, Suspense, useEffect, useState } from "react";
+import { type FC, type JSX, Suspense, useEffect, useState } from "react";
 import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { TooltipProvider } from "@vector-im/compound-web";

src/ClientContext.tsx

@@ -14,6 +14,7 @@ import {
   useContext,
   useRef,
   useMemo,
+  type JSX,
 } from "react";
 import { useNavigate } from "react-router-dom";
 import { logger } from "matrix-js-sdk/src/logger";

src/auth/useInteractiveRegistration.ts

@@ -39,7 +39,7 @@ export const useInteractiveRegistration = (
     undefined,
   );
 
-  const authClient = useRef<MatrixClient>();
+  const authClient = useRef<MatrixClient | undefined>(undefined);
   if (!authClient.current) {
     authClient.current = createClient({
       baseUrl: Config.defaultHomeserverUrl()!,

src/auth/useRecaptcha.ts

@@ -32,7 +32,7 @@ export function useRecaptcha(sitekey?: string): {
 } {
   const { t } = useTranslation();
   const [recaptchaId] = useState(() => randomString(16));
-  const promiseRef = useRef<RecaptchaPromiseRef>();
+  const promiseRef = useRef<RecaptchaPromiseRef | undefined>(undefined);
 
   useEffect(() => {
     if (!sitekey) return;

src/grid/TileWrapper.tsx

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ComponentType, memo, type RefObject, useRef } from "react";
+import {
+  type ComponentType,
+  type JSX,
+  memo,
+  type RefObject,
+  useRef,
+} from "react";
 import { type EventTypes, type Handler, useDrag } from "@use-gesture/react";
 import { type SpringValue } from "@react-spring/web";
 import classNames from "classnames";

src/input/Input.tsx

@@ -12,6 +12,7 @@ import {
   forwardRef,
   type ReactNode,
   useId,
+  type JSX,
 } from "react";
 import classNames from "classnames";
 

src/input/StarRatingInput.tsx

@@ -4,7 +4,7 @@ Copyright 2023, 2024 New Vector Ltd.
 SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
-import { useState } from "react";
+import { useState, type JSX } from "react";
 import { useTranslation } from "react-i18next";
 
 import styles from "./StarRatingInput.module.css";

src/livekit/MediaDevicesContext.tsx

@@ -14,6 +14,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type JSX,
 } from "react";
 import { createMediaDeviceObserver } from "@livekit/components-core";
 import { map, startWith } from "rxjs";

src/reactions/useReactionsSender.tsx

@@ -12,6 +12,7 @@ import {
   type ReactNode,
   useCallback,
   useMemo,
+  type JSX,
 } from "react";
 import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { logger } from "matrix-js-sdk/src/logger";

src/room/GroupCallView.tsx

@@ -154,11 +154,11 @@ export const GroupCallView: FC<Props> = ({
   );
 
   const deviceContext = useMediaDevices();
-  const latestDevices = useRef<MediaDevices>();
+  const latestDevices = useRef<MediaDevices | undefined>(undefined);
   latestDevices.current = deviceContext;
 
   // TODO: why do we use a ref here instead of using muteStates directly?
-  const latestMuteStates = useRef<MuteStates>();
+  const latestMuteStates = useRef<MuteStates | undefined>(undefined);
   latestMuteStates.current = muteStates;
 
   useEffect(() => {

src/room/InCallView.tsx

@@ -23,6 +23,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type JSX,
 } from "react";
 import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";

src/room/LobbyView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, useCallback, useMemo, useState } from "react";
+import { type FC, useCallback, useMemo, useState, type JSX } from "react";
 import { useTranslation } from "react-i18next";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Button } from "@vector-im/compound-web";

src/room/RoomPage.tsx

@@ -5,7 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, useEffect, useState, type ReactNode, useRef } from "react";
+import {
+  type FC,
+  useEffect,
+  useState,
+  type ReactNode,
+  useRef,
+  type JSX,
+} from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

src/room/useLoadGroupCall.ts

@@ -122,7 +122,7 @@ export const useLoadGroupCall = (
   viaServers: string[],
 ): GroupCallStatus => {
   const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
-  const activeRoom = useRef<Room>();
+  const activeRoom = useRef<Room | undefined>(undefined);
   const { t } = useTranslation();
 
   const bannedError = useCallback(

src/settings/RageshakeButton.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useTranslation } from "react-i18next";
-import { type FC, useCallback } from "react";
+import { type FC, useCallback, type JSX } from "react";
 import { Button } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 

src/useInitial.ts

@@ -11,7 +11,6 @@ import { useRef } from "react";
  * React hook that returns the value given on the initial render.
  */
 export function useInitial<T>(getValue: () => T): T {
-  const ref = useRef<{ value: T }>();
-  ref.current ??= { value: getValue() };
+  const ref = useRef<{ value: T }>({ value: getValue() });
   return ref.current.value;
 }

src/useReactiveState.ts

@@ -23,9 +23,9 @@ export const useReactiveState = <T>(
   updateFn: (prevState?: T) => T,
   deps: DependencyList,
 ): [T, Dispatch<SetStateAction<T>>] => {
-  const state = useRef<T>();
+  const state = useRef<T | undefined>(undefined);
   if (state.current === undefined) state.current = updateFn();
-  const prevDeps = useRef<DependencyList>();
+  const prevDeps = useRef<DependencyList | undefined>(undefined);
 
   // Since we store the state in a ref, we use this counter to force an update
   // when someone calls setState