steady-hooks ⚓

Stable, predictable React hooks for async, state, and browser behavior.

steady-hooks is a lightweight, production-ready collection of React hooks focused on:

• 🛡️ Safety (no memory leaks, no race conditions)
• 🔁 Predictable behavior
• 🧼 Clean and minimal APIs
• 🌍 Real-world use cases

Built with TypeScript, fully tree-shakable, and framework-agnostic.

✨ Features

• ✅ Safe async handling (prevents stale updates & race conditions)
• ✅ Browser & environment utilities
• ✅ Zero external runtime dependencies
• ✅ Fully typed with TypeScript
• ✅ Tree-shakable
• ✅ Small bundle size

📦 Installation

npm install steady-hooks

or

yarn add steady-hooks

🚀 Usage

import { useStableAsync, useIsMobile } from "steady-hooks";

🪝 Available Hooks

useStableAsync

Safe async execution with built-in race-condition prevention.

const { run, data, loading, error } = useStableAsync(fetchUsers);

useEffect(() => {
  run();
}, []);

Use cases

• API calls
• Search requests
• Async side effects

useDebouncedValue

Debounce rapidly changing values.

const debouncedSearch = useDebouncedValue(search, 500);

useIsMobile

Detect mobile viewport using ResizeObserver.

const isMobile = useIsMobile();

useClickOutside

Detect clicks outside a referenced element.

useClickOutside(ref, () => setOpen(false));

useCountdown

Countdown timer with start, pause, and reset controls.

const { seconds, start, pause, reset } = useCountdown(60);

useLocalStorage

Persistent state synchronized across browser tabs.

const [theme, setTheme] = useLocalStorage("theme", "light");

usePing

Monitor network connectivity and latency.

const { online, latency } = usePing();

useLatestRef

Always access the latest value (prevents stale closures).

const latestValue = useLatestRef(value);

usePreviousValue

Retrieve the previous value of state or props.

const prev = usePreviousValue(value);

useMounted

Safely check if a component is currently mounted.

const isMounted = useMounted();

useOnceEffect

Run an effect exactly once.

useOnceEffect(() => {
  init();
});

🧠 Philosophy

steady-hooks prioritizes correctness over cleverness:

• Predictable behavior over hacks
• Safe defaults
• Explicit, readable APIs

Designed for real production systems, not demos.

🌟 Contributing

Contributions are welcome!

• Open issues
• Suggest new hooks
• Submit pull requests

📄 License

MIT © 2026 Anuj Gadekar

🔗 Links

• GitHub: https://github.com/AnujGadekar1/steady-hooks
• npm: https://www.npmjs.com/package/steady-hooks