refactor(hooks): minor changes in hooks

hooks/use-local-storage.ts

@@ -1,26 +1,36 @@
 import { useEffect, useState } from "react";
 
-const useLocalStorage = <T>(
-  key: string,
-  initialValue: T,
-): [T, (value: T) => void] => {
-  const [storedValue, setStoredValue] = useState(initialValue);
+const getLocalValue = <T>(key: string, initValue: T): T => {
+  if (typeof window === "undefined") {
+    return initValue;
+  }
 
-  useEffect(() => {
-    // Retrieve from localStorage
-    const item = window.localStorage.getItem(key);
-    if (item) {
-      setStoredValue(JSON.parse(item));
+  try {
+    // retrive from local storage
+    const localValue = localStorage.getItem(key);
+    if (localValue) {
+      return JSON.parse(localValue) as T;
     }
-  }, [key]);
+  } catch (error) {
+    console.error(`Error parsing localStorage for key "${key}":`, error);
+  }
 
-  const setValue = (value: T) => {
-    // Save state
-    setStoredValue(value);
-    // Save to localStorage
-    window.localStorage.setItem(key, JSON.stringify(value));
-  };
-  return [storedValue, setValue];
+  // if no value exists in localstorage, then fallback to given initValue
+  return initValue instanceof Function ? initValue() : initValue;
 };
 
+const useLocalStorage = <T>(key: string, initValue: T) => {
+  const [value, setValue] = useState<T>(() => getLocalValue(key, initValue));
+
+  useEffect(() => {
+    try {
+      // save in local storage
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.error(`Error setting localStorage for key "${key}":`, error);
+    }
+  }, [key, value]);
+
+  return [value, setValue] as const;
+};
 export default useLocalStorage;

hooks/use-lock-body.ts

@@ -1,12 +1,13 @@
-import * as React from "react"
+import { useLayoutEffect } from "react";
 
-// @see https://usehooks.com/useLockBodyScroll.
-export function useLockBody() {
-  React.useLayoutEffect((): (() => void) => {
-    const originalStyle: string = window.getComputedStyle(
-      document.body
-    ).overflow
-    document.body.style.overflow = "hidden"
-    return () => (document.body.style.overflow = originalStyle)
-  }, [])
+export default function useLockBody() {
+  useLayoutEffect(() => {
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, []);
 }

hooks/use-media-query.ts

@@ -1,13 +1,15 @@
 import { useEffect, useState } from "react";
 
+type Device = "mobile" | "sm" | "tablet" | "desktop";
+
+interface Dimension {
+  width: number;
+  height: number;
+}
+
 export function useMediaQuery() {
-  const [device, setDevice] = useState<"mobile" | "sm" | "tablet" | "desktop" | null>(
-    null,
-  );
-  const [dimensions, setDimensions] = useState<{
-    width: number;
-    height: number;
-  } | null>(null);
+  const [device, setDevice] = useState<Device | null>(null);
+  const [dimensions, setDimensions] = useState<Dimension | null>(null);
 
   useEffect(() => {
     const checkDevice = () => {

hooks/use-mounted.ts

@@ -1,11 +1,11 @@
-import * as React from "react"
+import { useEffect, useState } from "react";
 
 export function useMounted() {
-  const [mounted, setMounted] = React.useState(false)
+  const [mounted, setMounted] = useState(false);
 
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
-  return mounted
+  return mounted;
 }

hooks/use-scroll.ts

@@ -4,7 +4,7 @@ export function useScroll(threshold: number) {
   const [scrolled, setScrolled] = useState(false);
 
   const onScroll = useCallback(() => {
-    setScrolled(window.pageYOffset > threshold);
+    setScrolled(window.scrollY > threshold);
   }, [threshold]);
 
   useEffect(() => {