@haquesomrat/react-useful-hook

A carefully curated set of production‑ready hooks for React + TypeScript. SSR‑aware, strongly typed, zero external deps.

Hooks

• State & timing: useDebouncedState, useThrottleFn, useTimeout, useInterval
• Async: useAsyncMemo
• Refs & callbacks: useLatest, useStableCallback, usePrevious, useMounted
• Events & hotkeys: useEventListener, useHotkeys
• Storage: useLocalStorage<T>, useSessionStorage<T>
• Media & observers: useMediaQuery, useIntersectionObserver, useMutationObserver, useMeasure
• UX utilities: useClickOutside, useCopyToClipboard, useNetworkStatus

Install

npm i @haquesomrat/react-use

Quickstart

import {
  useDebouncedState,
  useLocalStorage,
  useHotkeys,
} from "@haquesomrat/react-use";

function Demo() {
  const [raw, setRaw, debounced] = useDebouncedState("", 300);
  const [name, setName] = useLocalStorage<string>("name", "");
  useHotkeys({ "ctrl+k": () => alert("Palette!") });
  return (
    <div>
      <input
        value={raw}
        onChange={(e) => setRaw(e.target.value)}
        placeholder="Search"
      />
      <p>Debounced: {debounced}</p>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
      />
    </div>
  );
}

Patterns & Guarantees

• All callbacks wrapped by useStableCallback to avoid stale closures.
• SSR‑safe: guards for window, document, and observers.
• Strong TS types, generic friendly.

Testing ideas (Vitest)

• useDebouncedState updates after delay.
• useAsyncMemo resolves value, cancels on unmount.
• useLocalStorage reads/writes JSON.
• useHotkeys triggers only on exact combos.

Roadmap

• useUndoRedo state helper
• useList and useSet typed collections
• useFetch tiny fetch wrapper (abortable)
• useUrlQueryState (for Next.js app router)