Stable, predictable React hooks for async, state, and browser behavior
npm install steady-hookssteady-hooks is a lightweight, production-ready collection of React hooks focused on:
bash
npm install steady-hooks
`
or
`bash
yarn add steady-hooks
`
---
🚀 Usage
`ts
import { useStableAsync, useIsMobile } from "steady-hooks";
`
---
🪝 Available Hooks
$3
Safe async execution with built-in race-condition prevention.
`ts
const { run, data, loading, error } = useStableAsync(fetchUsers);
useEffect(() => {
run();
}, []);
`
Use cases
* API calls
* Search requests
* Async side effects
---
$3
Debounce rapidly changing values.
`ts
const debouncedSearch = useDebouncedValue(search, 500);
`
---
$3
Detect mobile viewport using ResizeObserver.
`ts
const isMobile = useIsMobile();
`
---
$3
Detect clicks outside a referenced element.
`ts
useClickOutside(ref, () => setOpen(false));
`
---
$3
Countdown timer with start, pause, and reset controls.
`ts
const { seconds, start, pause, reset } = useCountdown(60);
`
---
$3
Persistent state synchronized across browser tabs.
`ts
const [theme, setTheme] = useLocalStorage("theme", "light");
`
---
$3
Monitor network connectivity and latency.
`ts
const { online, latency } = usePing();
`
---
$3
Always access the latest value (prevents stale closures).
`ts
const latestValue = useLatestRef(value);
`
---
$3
Retrieve the previous value of state or props.
`ts
const prev = usePreviousValue(value);
`
---
$3
Safely check if a component is currently mounted.
`ts
const isMounted = useMounted();
`
---
$3
Run an effect exactly once.
`ts
useOnceEffect(() => {
init();
});
`
---
🧠 Philosophy
steady-hooks` prioritizes correctness over cleverness: