refactor(deps): remove some unneeded deps

package.json

@@ -38,9 +38,8 @@
     "react-dom": "^18.2.0",
     "react-dropdown-select": "^4.4.2",
     "react-ga4": "^2.1.0",
-    "react-hotkeys-hook": "^3.2.1",
+    "react-hotkeys-hook": "^4.4.3",
-    "react-use": "^17.4.2",
+    "recoil": "^0.7.7",
-    "recoil": "^0.7.6",
     "recoil-sync": "^0.2.0",
     "svg2png-converter": "^1.0.2",
     "tinycolor2": "^1.4.2"

src/components/SearchInput/SearchInput.tsx

@@ -6,7 +6,6 @@ import {
   ReactNode,
 } from "react";
 import { useRecoilState } from "recoil";
-import { useDebounce } from "react-use";
 import { useHotkeys } from "react-hotkeys-hook";
 import {
   Command,
@@ -16,6 +15,7 @@ import {
 } from "@phosphor-icons/react";
 import ReactGA from "react-ga4";
 
+import { useDebounce } from "@/hooks";
 import { searchQueryAtom } from "@/state";
 import "./SearchInput.css";
 
@@ -33,7 +33,7 @@ const SearchInput = (_: SearchInputProps) => {
   const inputRef =
     useRef<HTMLInputElement>() as MutableRefObject<HTMLInputElement>;
 
-  useHotkeys("ctrl+k,cmd+k", (e) => {
+  useHotkeys("ctrl+k,meta+k", (e) => {
     e.preventDefault();
     if (!e.repeat) {
       inputRef.current?.focus();

src/hooks/index.ts

@@ -1,7 +1,6 @@
 export { default as useCSSVariables } from "./useCSSVariables";
 export { default as useDebounce } from "./useDebounce";
 export { default as useEvent } from "./useEvent";
-export { default as useIconParameters } from "./useIconParameters";
 export { default as useLocalStorage } from "./useLocalStorage";
 export { default as useMediaQuery } from "./useMediaQuery";
 export { default as usePersistSettings } from "./usePersistSettings";

src/hooks/useIconParameters.ts

@@ -1,64 +0,0 @@
-import { useEffect } from "react";
-import { useSearchParam } from "react-use";
-import { useSetRecoilState } from "recoil";
-import TinyColor from "tinycolor2";
-import { IconStyle } from "@phosphor-icons/core";
-
-import { iconColorAtom, iconWeightAtom, iconSizeAtom } from "../state/atoms";
-
-export default () => {
-  const weight = useSearchParam("weight")?.replace(/["']/g, "");
-  const size = useSearchParam("size")?.replace(/["']/g, "");
-  const color = useSearchParam("color")?.replace(/["']/g, "");
-
-  const setColor = useSetRecoilState(iconColorAtom);
-  const setWeight = useSetRecoilState(iconWeightAtom);
-  const setSize = useSetRecoilState(iconSizeAtom);
-
-  useEffect(() => {
-    if (weight) {
-      if (weight.toUpperCase() in IconStyle) setWeight(weight as IconStyle);
-    }
-  }, [weight, setWeight]);
-
-  useEffect(() => {
-    if (size) {
-      const normalizedSize = parseInt(size);
-      if (typeof normalizedSize === "number" && isFinite(normalizedSize))
-        setSize(Math.min(Math.max(normalizedSize, 16), 96));
-    }
-  }, [size, setSize]);
-
-  useEffect(() => {
-    if (color) {
-      const normalizedColor = TinyColor(color);
-      if (normalizedColor.isValid()) setColor(normalizedColor.toHexString());
-    }
-  }, [color, setColor]);
-
-  useEffect(() => {
-    if (!weight && !size && !color) {
-      const persistedState = JSON.parse(
-        window.localStorage.getItem("__phosphor_settings__") || "null"
-      );
-
-      if (!!persistedState) {
-        const { weight, size, color } = persistedState;
-        if (weight) {
-          if (weight.toUpperCase() in IconStyle) setWeight(weight as IconStyle);
-        }
-        if (size) {
-          const normalizedSize = parseInt(size);
-          if (typeof normalizedSize === "number" && isFinite(normalizedSize))
-            setSize(Math.min(Math.max(normalizedSize, 16), 96));
-        }
-        if (color) {
-          const normalizedColor = TinyColor(color);
-          if (normalizedColor.isValid())
-            setColor(normalizedColor.toHexString());
-        }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-};

src/hooks/useThrottled.ts

@@ -1,21 +1,21 @@
-import { useRef, useEffect, useCallback } from "react";
+import { useRef, useEffect, useCallback, DependencyList } from "react";
 
-type Callback = (...args: any) => void;
+type Callback<T extends Array<unknown>> = (...args: T) => void;
 
-export default (
+const useThrottled = <T extends Array<unknown>>(
-  callback: Callback,
+  callback: Callback<T>,
   delay: number,
-  dependencies: any[] = []
+  dependencies: DependencyList = []
-) => {
+): ((...args: T) => void) => {
   const throttleRef = useRef<Boolean>(false);
-  const callbackRef = useRef<Callback>(callback);
+  const callbackRef = useRef<Callback<T>>(callback);
 
   // Update the callback to be used, if it ever changes
   useEffect(() => {
     callbackRef.current = callback;
   }, [callback]);
 
-  return useCallback<Callback>(
+  return useCallback<Callback<T>>(
     (...args) => {
       if (throttleRef.current) return;
 
@@ -29,3 +29,5 @@ export default (
     [delay, ...dependencies]
   );
 };
+
+export default useThrottled;

src/hooks/useTimeoutFn.ts

@@ -1,6 +1,10 @@
 import { useCallback, useEffect, useRef } from "react";
 
-export type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];
+export type UseTimeoutFnReturn = [
+  isReady: () => boolean | null,
+  clear: () => void,
+  set: () => void
+];
 
 export default function useTimeoutFn(
   fn: Function,

src/hooks/useTransientState.ts

@@ -1,11 +1,11 @@
 /* eslint-disable */
 import { useState, useEffect } from "react";
-import { useTimeoutFn } from "react-use";
+import useTimeoutFn from "./useTimeoutFn";
 
 export default <T>(
   baseState: T,
   ms: number = 1000
-): [T, (transientValue: T) => void] => {
+): [value: T, set: (transientValue: T) => void] => {
   const [value, setValue] = useState<T>(baseState);
   const [, cancel, restart] = useTimeoutFn(() => setValue(baseState), ms);