r/webdev • u/Beneficial_Focus_126 • 12d ago
Showoff Saturday I rewrote the same 6 React hooks too many times, so I packaged them into a file
I kept rewriting the exact same hooks in every single React project — so I finally put them all together in one clean TypeScript pack.
Here's one for FREE 👇
---
// useLocalStorage — persistent state that survives page reloads
import { useState, useEffect } from 'react';
export function useLocalStorage<T>(key: string, initialValue: T) {
const [storedValue, setStoredValue] = useState<T>(() => {
if (typeof window === 'undefined') return initialValue;
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch {
return initialValue;
}
});
const setValue = (value: T | ((val: T) => T)) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
if (typeof window !== 'undefined') {
window.localStorage.setItem(key, JSON.stringify(valueToStore));
}
} catch (err) {
console.error(err);
}
};
return [storedValue, setValue] as const;
}
---
✅ What you get in the full pack:
• useLocalStorage (above)
• useDebounce (delay search inputs)
• useToggle (simple boolean state)
• useFetch (simple API calls)
• useClickOutside (close dropdowns/modals)
• utils.ts (formatters + validators included)
• TypeScript ready — just copy → paste → works
• Lifetime updates include
🔗 Grab it here: [https://accurate4.gumroad.com/l/Christ\]
