Update to react v19

src/modules/core/components/AppbarSearch.tsx

@@ -31,7 +31,7 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
 
     const [query, setQuery] = useQueryParam('query', StringParam);
     const [isSearchOpen, setIsSearchOpen] = useState(!isClosable || !!query);
-    const inputRef = React.useRef<HTMLInputElement>();
+    const inputRef = React.useRef<HTMLInputElement>(undefined);
 
     const [searchString, setSearchString] = useState(query ?? '');
 

src/modules/core/components/menu/IconMenuItem.tsx

@@ -27,7 +27,7 @@ type IconMenuItemProps = {
     renderLabel?: () => React.ReactNode;
     LeftIcon?: OverridableComponent<SvgIconTypeMap> & { muiName: string };
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    ref?: RefObject<HTMLLIElement>;
+    ref?: RefObject<HTMLLIElement | null>;
     RightIcon?: OverridableComponent<SvgIconTypeMap> & { muiName: string };
     sx?: SxProps<Theme>;
 };

src/modules/core/components/menu/Menu.tsx

@@ -7,7 +7,7 @@
  */
 
 import MuiMenu, { MenuProps } from '@mui/material/Menu';
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 
 export const Menu = ({
     children,

src/modules/core/components/placeholder/EmptyView.tsx

@@ -8,7 +8,7 @@
 
 // adopted from: https://github.com/tachiyomiorg/tachiyomi/blob/master/app/src/main/java/eu/kanade/tachiyomi/widget/EmptyView.kt
 
-import { useMemo, useState } from 'react';
+import { useMemo, useState, type JSX } from 'react';
 import Typography from '@mui/material/Typography';
 import { SxProps, Theme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';

src/modules/core/components/placeholder/LoadingPlaceholder.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
+import React, { type JSX } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
 

src/modules/core/components/settings/MutableListSetting.tsx

@@ -14,7 +14,7 @@ import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type JSX } from 'react';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
 import { useTranslation } from 'react-i18next';

src/modules/core/hooks/useAutomaticScrolling.ts

@@ -77,8 +77,8 @@ export const useAutomaticScrolling = (
 } => {
     const isCallback = typeof refOrCallback === 'function';
 
-    const elementStyle = useRef<CSSStyleDeclaration>();
-    const scrollTriggerTimer = useRef<NodeJS.Timeout>();
+    const elementStyle = useRef<CSSStyleDeclaration>(undefined);
+    const scrollTriggerTimer = useRef<NodeJS.Timeout>(undefined);
     const scrollTriggerAnimationFrameId = useRef(-1);
 
     const [isActive, setIsActive] = useState(false);

src/modules/core/hooks/useIntersectionObserver.tsx

@@ -9,7 +9,7 @@
 import { RefObject, useLayoutEffect, useState } from 'react';
 
 export const useIntersectionObserver = (
-    ref: RefObject<HTMLElement> | HTMLElement | undefined | null,
+    ref: RefObject<HTMLElement | null> | HTMLElement | undefined | null,
     callback: IntersectionObserverCallback,
     {
         ignoreInitialObserve = false,

src/modules/core/hooks/useMouseDragScroll.tsx

@@ -32,12 +32,12 @@ export const useMouseDragScroll = (
 ) => {
     const [isDragging, setIsDragging] = useState(false);
 
-    const elementStyle = useRef<CSSStyleDeclaration>();
+    const elementStyle = useRef<CSSStyleDeclaration>(undefined);
     const previousClickPosX = useRef<Positions>([0, 0, 0]);
     const previousClickPosY = useRef<Positions>([0, 0, 0]);
     const previousClickTime = useRef<ClickTimes>([0, 0, 0]);
     const scrollAtT0 = useRef<[ScrollLeft: number, ScrollTop: number]>([0, 0]);
-    const inertiaTimeInterval = useRef<NodeJS.Timeout>();
+    const inertiaTimeInterval = useRef<NodeJS.Timeout>(undefined);
 
     useEffect(() => {
         const element = ref?.current;

src/modules/core/hooks/useResizeObserver.tsx

@@ -9,7 +9,7 @@
 import { RefObject, useLayoutEffect, useState } from 'react';
 
 export const useResizeObserver = (
-    ref: RefObject<HTMLElement> | HTMLElement | undefined | null,
+    ref: RefObject<HTMLElement | null> | HTMLElement | undefined | null,
     callback: ResizeObserverCallback,
 ): (() => void) => {
     const [disconnect, setDisconnect] = useState<() => void>(() => {});