import { useCallback, useEffect, useState } from "react";
export function useLocalStorage<T>(
key: string,
initialValue: T
): [T, (value: T | ((prev: T) => T)) => void] {
const read = useCallback((): T => {
if (typeof window === "undefined") return initialValue;
try {
const raw = window.localStorage.getItem(key);
return raw != null ? (JSON.parse(raw) as T) : initialValue;
} catch {
return initialValue;
}
}, [key, initialValue]);
const [stored, setStored] = useState<T>(read);
useEffect(() => {
setStored(read());
}, [read]);
const setValue = useCallback(
(value: T | ((prev: T) => T)) => {
setStored((prev) => {
const next = typeof value === "function" ? (value as (p: T) => T)(prev) : value;
try {
window.localStorage.setItem(key, JSON.stringify(next));
} catch {
// quota or private mode
}
return next;
});
},
[key]
);
return [stored, setValue];
}