🪝 React Hooks Showcase — 8 custom hooks, live demos + the source

Eight small, dependency-free, TypeScript custom hooks — the ones you end up re-copying into every project — each with an interactive demo and the full source one click away.

▶ Live: https://react-hooks-showcase.vercel.app/

All eight live in a single hooks.ts. Copy what you need.

The hooks

Hook	What it does
useDebounce	Delay a fast-changing value until it settles (search inputs, resize).
usePrevious	Read the value from the previous render.
useLocalStorage	useState that persists to localStorage and survives reloads.
useMediaQuery	A live boolean for a CSS media query — no resize listener.
useOnClickOutside	Fire when a click lands outside a ref (dropdowns, popovers, modals).
useCopyToClipboard	Copy text and get a copied flag that resets itself.
useToggle	A boolean with a memoized toggler.
useIntersectionObserver	Know when an element scrolls into view (lazy-load, infinite scroll).

A couple of details worth stealing

• useDebounce clears its timer on every change (return () => clearTimeout(t)), so the value only lands after a quiet period — fire your API call off the debounced value, not the raw one.
• usePrevious works because the effect runs after render: on this render the ref still holds last render's value, and the effect then updates it for next time.
• useMediaQuery listens to matchMedia(...).addEventListener("change", …), not window.resize — you only re-render when the query result actually flips, not on every pixel.
• useLocalStorage uses a lazy useState initializer so it reads storage exactly once, and swallows write errors (quota, private mode).

Each demo is interactive — type into the debounce box, reload the localStorage one, resize for the media query, scroll the intersection target — and the source toggle shows the exact implementation.

Stack

React 19 · TypeScript · Vite.

Run locally

npm install
npm run dev

License

MIT © 2026 dev48v — dev48v.infy.uk