DEV Community

Somchai Jaidee
Somchai Jaidee

Posted on

100+ Typed and Tested React Hooks You’ll Actually Use in Production

⚡ Stop reinventing the wheel! 100+ battle-tested React hooks for state, animations, network requests, and more – fully typed and production-ready.

📦 → npm install hoxa (visit the full documentation!)
⭐ → Star on GitHub (helps us grow!)

😩 The Hook Problem We All Face 

// Sound familiar?
const useDebounce = (...) => { ... } 
// Copied from last project... again
Enter fullscreen mode Exit fullscreen mode

How many hours have you wasted rewriting:

  • useLocalStorage

  • useFetchWithCache

  • useWindowResize

🚀 Introducing Hoxa: Your Hook Toolkit 

npm install hoxa
# or
yarn add hoxa
# or
bun add hoxa
Enter fullscreen mode Exit fullscreen mode

100+ pre-built hooks covering:

  • 🧠 State management

  • 🌐 Network requests

  • ⌚ Timers & animations

  • 📦 Browser/DOM interactions

  • 🔋 Utilities (throttle, clipboard, media queries...)

🧠 Why Hoxa?

  • ✅ 100+ Custom React Hooks, with more coming in future updates
  • 🧪 Every hook is tested and production-ready
  • 🧩 Categorized for easy discovery
  • 🪶 Lightweight and tree-shakable

All fully typed in TypeScript

✨ Real Usage Example 

import { useLocalStorageState, useClickOutside } from "hoxa";
import { useState, type Ref } from "react";

export default function UserPanel() {
  const [theme, setTheme] = useLocalStorageState("theme", "dark");
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const dropdownRef = useClickOutside(() => setIsMenuOpen(false));

  return (
    <div ref={dropdownRef as Ref<HTMLDivElement>}>
      <button onClick={() => setIsMenuOpen(!isMenuOpen)}>Menu</button>
      {isMenuOpen && (
        <div>
          <ul>
            <li>
              <button>Profile</button>
            </li>
            <li>
              <button>Settings</button>
            </li>
            <li>
              <span>Dark Mode</span>
              <input
                type="checkbox"
                checked={theme === "dark"}
                onChange={(e) => setTheme(e.target.checked ? "dark" : "light")}
              />
            </li>
            <li>
              <button>Logout</button>
            </li>
          </ul>
        </div>
      )}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

💡 Popular Hooks You’ll Use Daily

  1. useLocalStorageState

    Persist state in localStorage + sync across tabs.

    → Ideal for user preferences, caching.

  2. useDebouncedState

    Delay state updates until inactivity (e.g., search inputs).

    → Prevents excessive re-renders/API calls.

  3. usePrevious

    Track previous value of state/props.

    → Essential for diff checks and animations.

  4. useFetchWithCache

    Fetch data with built-in caching.

    → Optimizes network requests + reduces load times.

  5. useClickOutside

    Detect clicks outside an element.

    → Critical for modals, dropdowns, popovers.

  6. useHover

    Detect hover state on elements.

    → For tooltips, interactive cards, etc.

  7. useIntersectionObserver

    Track element visibility in viewport.

    → Lazy-loading, scroll animations, analytics.

  8. useElementSize

    Monitor element dimensions.

    → Responsive layouts, canvas rendering.

  9. useDarkMode

    Manage dark/light theme with OS sync.

    → User experience cornerstone.

  10. useDeepCompareEffect

    Optimize useEffect with deep equality checks.

    → Avoid unnecessary effect runs with complex objects.

  11. useAsyncRetry

    Auto-retry failed async operations.

    → Robust error handling for flaky networks.

  12. useThrottleEvent

    Rate-limit expensive events (scroll/resize).

    → Smooth performance for heavy UIs.

  13. useForm

    Full-featured form state + validation.

    → Simplify complex forms without libraries.

  14. useToggle

    Clean boolean state toggling.

    → Switches, accordions, checkboxes.

  15. useOnlineStatus

    Detect browser connectivity.

    → Offline mode UX, sync warnings.

→ visit the full documentation

🙌 If you find Hoxa useful, please consider sharing it with your team or your dev community.
A single share helps this library grow and reach more React developers like you!

Top comments (1)

Collapse
 
taarnn profile image
Somchai Jaidee •

This is my first time making a package with a real goal. If you have any suggestions, please let me know. I would like to get some feedback to make Hoxa more suitable for the community!