React 19

package.json

@@ -32,8 +32,8 @@
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.1",
-    "@tanstack/react-query": "^5.62.0",
-    "@tanstack/react-virtual": "3.10.9",
+    "@tanstack/react-query": "^5.62.3",
+    "@tanstack/react-virtual": "3.11.0",
     "@tauri-apps/api": "2.1.1",
     "@tauri-apps/plugin-dialog": "2.0.1",
     "@tauri-apps/plugin-log": "2.0.1",
@@ -45,26 +45,25 @@
     "lodash-es": "^4.17.21",
     "nanoid": "^5.0.9",
     "normalize.css": "^8.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-fontawesome": "^1.7.1",
     "react-keybinding-component": "^2.2.0",
     "react-router": "^7.0.2",
     "semver": "^7.6.3",
-    "zustand": "^5.0.1"
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@tauri-apps/cli": "2.1.0",
     "@types/bun": "^1.1.14",
     "@types/lodash": "^4.17.13",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
     "@types/react-fontawesome": "^1.6.8",
     "@types/semver": "^7.5.8",
     "@vitejs/plugin-react": "^4.3.4",
-    "@welldone-software/why-did-you-render": "^8.0.3",
     "autoprefixer": "^10.4.20",
     "madge": "^8.0.0",
     "postcss": "^8.4.49",
@@ -74,7 +73,7 @@
     "postcss-url": "^10.1.3",
     "typescript": "^5.7.2",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^6.0.2",
+    "vite": "^6.0.3",
     "vite-plugin-svgr": "^4.3.0"
   },
   "trustedDependencies": ["@biomejs/biome", "@parcel/watcher"]

src/components/Setting.tsx

@@ -16,7 +16,7 @@ export function Description(props: Props) {
 }
 
 export function Label(
-  props: JSX.IntrinsicElements['label'] & {
+  props: React.LabelHTMLAttributes<HTMLLabelElement> & {
     noMargin?: boolean;
     htmlFor: string;
   },
@@ -44,7 +44,9 @@ export type InputProps = {
   id: string;
 };
 
-export function Input(props: JSX.IntrinsicElements['input'] & InputProps) {
+export function Input(
+  props: React.InputHTMLAttributes<HTMLInputElement> & InputProps,
+) {
   const { label, description, id, ...otherProps } = props;
   return (
     <div>
@@ -65,7 +67,7 @@ export function ErrorMessage(props: Props) {
 }
 
 export function Select(
-  props: Props & JSX.IntrinsicElements['select'] & InputProps,
+  props: Props & React.SelectHTMLAttributes<HTMLSelectElement> & InputProps,
 ) {
   const { label, description, id, ...otherProps } = props;
 

src/elements/Button.tsx

@@ -6,9 +6,9 @@ type Props = {
   relevancy?: 'danger';
   bSize?: 'small';
   block?: boolean;
-};
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-export default function Button(props: Props & JSX.IntrinsicElements['button']) {
+export default function Button(props: Props) {
   const { relevancy, bSize, block, ...rest } = props;
 
   const classes = cx(styles.button, {

src/hooks/useScrollRestoration.ts

@@ -23,11 +23,13 @@ const setScrollPosition = debounce(function setScrollPosition(
  *
  * Except we want to use location.pathname, and not location.key
  */
-export function useScrollRestoration(container: React.RefObject<HTMLElement>) {
+export function useScrollRestoration(
+  container: React.RefObject<HTMLElement | null>,
+) {
   const [init, setInit] = useState(false); // React strick mode is a nightmare
   const key = `scroll-position-${useLocation().pathname}`;
   const { state } = useNavigation();
-  const target = container.current;
+  const target = container?.current;
 
   useEffect(() => {
     function onScroll() {

src/main.tsx

@@ -1,5 +1,3 @@
-import './lib/wdyr';
-
 /*
 |--------------------------------------------------------------------------
 | React and Router