perf: migrate to react 19

Signed-off-by: rare-magma <[email protected]>

src/guitos/sections/Budget/BudgetPage.test.tsx

@@ -1,6 +1,6 @@
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import { BrowserRouter } from "react-router";
 import { describe, expect, it, vi } from "vitest";
 import {

src/guitos/sections/ChartsPage/ChartsPage.tsx

@@ -1,4 +1,4 @@
-import { type MutableRefObject, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import {
   Button,
   Col,
@@ -73,13 +73,9 @@ export default function ChartsPage({ onShowGraphs }: GraphProps) {
     preventDefault: true,
   });
 
-  useHotkeys(
-    ["/", "f"],
-    (e) =>
-      !e.repeat &&
-      focusRef(filterRef as unknown as MutableRefObject<HTMLInputElement>),
-    { preventDefault: true },
-  );
+  useHotkeys(["/", "f"], (e) => !e.repeat && focusRef(filterRef), {
+    preventDefault: true,
+  });
 
   function handleSelect(option: Option[]) {
     const newFilter = option[0] as FilteredItem;

src/guitos/sections/ItemForm/ItemFormGroup.tsx

@@ -27,7 +27,7 @@ interface ItemFormProps {
   itemForm: BudgetItem;
   costPercentage: number;
   label: string;
-  inputRef: RefObject<HTMLInputElement>;
+  inputRef: RefObject<HTMLInputElement | null>;
   userOptions: UserOptions;
 }
 

src/guitos/sections/NavBar/NavBar.tsx

@@ -42,8 +42,7 @@ export interface SearchOption {
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: <explanation>
 export function NavBar() {
   const searchRef = useRef<TypeaheadRef>(null);
-  const nameRef =
-    useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
+  const nameRef = useRef<HTMLInputElement>(null);
   const deleteButtonRef = useRef<HTMLButtonElement>(null);
 
   const [expanded, setExpanded] = useState(false);
@@ -79,15 +78,9 @@ export function NavBar() {
     preventDefault: true,
   });
 
-  useHotkeys(
-    ["/", "f"],
-    (e) =>
-      !e.repeat &&
-      focusRef(
-        searchRef as unknown as React.MutableRefObject<HTMLInputElement>,
-      ),
-    { preventDefault: true },
-  );
+  useHotkeys(["/", "f"], (e) => !e.repeat && focusRef(searchRef), {
+    preventDefault: true,
+  });
 
   useHotkeys("n", (e) => !e.repeat && focusRef(nameRef), {
     preventDefault: true,

src/guitos/sections/NavBar/NavBarDelete.tsx

@@ -5,7 +5,7 @@ import { useBudget } from "../../context/BudgetContext";
 import type { Uuid } from "../../domain/uuid";
 
 interface NavBarDeleteProps {
-  deleteButtonRef: RefObject<HTMLButtonElement>;
+  deleteButtonRef: RefObject<HTMLButtonElement | null>;
   handleRemove: (i: Uuid) => void;
   expanded: boolean;
 }

src/guitos/sections/NavBar/NavBarImpExp.tsx

@@ -24,8 +24,7 @@ interface NavBarImpExpProps {
 export function NavBarImpExp({ expanded, setExpanded }: NavBarImpExpProps) {
   const { budget, budgetList, budgetNameList } = useBudget();
   const { handleImport } = useDB();
-  const importRef =
-    useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
+  const importRef = useRef<HTMLInputElement>(null);
   const importButtonRef = useRef<HTMLButtonElement>(null);
   const exportCSVButtonRef = useRef<HTMLButtonElement>(null);
   const impExpButtonRef = useRef<HTMLButtonElement>(null);

src/guitos/sections/StatCard/StatCard.tsx

@@ -40,10 +40,8 @@ export function StatCard({ onShowGraphs }: StatCardProps) {
   const shouldCalculateAvailablePerc =
     revenuePercentage <= 100 && stat && stat.available > 0;
 
-  const goalRef =
-    useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
-  const reservesRef =
-    useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
+  const goalRef = useRef<HTMLInputElement>(null);
+  const reservesRef = useRef<HTMLInputElement>(null);
 
   useHotkeys("g", (e) => !e.repeat && focusRef(goalRef), {
     preventDefault: true,

src/utils.ts

@@ -1,5 +1,6 @@
 import Big from "big.js";
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
+import type Typeahead from "react-bootstrap-typeahead/types/core/Typeahead";
 import type { NavigateFunction } from "react-router";
 import type { Budget } from "./guitos/domain/budget";
 import type { ItemOperation } from "./guitos/domain/calculationHistoryItem";
@@ -57,7 +58,7 @@ export function intlFormat(amount: number, userOptions: UserOptions): string {
   }).format(amount);
 }
 
-export function focusRef(ref: MutableRefObject<HTMLInputElement | undefined>) {
+export function focusRef(ref: RefObject<HTMLInputElement | Typeahead | null>) {
   if (ref.current) {
     ref.current.focus();
   }