⚛️ react-smart-hooks

Lightweight, production-ready React hooks library for state cleanup, memoized callbacks, and memory-safe async effects.

---

⚡ Key Features

• 🛡️ Memory Leak Guard: Safe async effects that automatically check cancellation tokens on unmount.
• ⏱️ Safe Timers: Automatic clearTimeout cleanup when components unmount.
• 📦 Zero Dependencies: Pure React 18+ TypeScript implementation with zero external runtime dependencies.
• 🚀 Tree-shakable: ES Modules (ESM) & CommonJS (CJS) dual builds out of the box.

---

📦 Installation

npm install react-smart-hooks
# or
yarn add react-smart-hooks
# or
pnpm add react-smart-hooks

---

🚀 Usage & API Overview

1. useAsyncEffect

Safe async effect execution with automatic cancellation token check to prevent state updates after unmount.

import { useAsyncEffect } from 'react-smart-hooks';

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);

  useAsyncEffect(async (isCancelled) => {
    const data = await fetchUserApi(userId);
    if (isCancelled()) return; // Abort state update if component unmounted
    setUser(data);
  }, [userId]);

  return <div>{user ? user.name : 'Loading...'}</div>;
}

2. useMountedState

Returns a getter function getIsMounted() that evaluates to true while the component is mounted.

import { useMountedState } from 'react-smart-hooks';

function HeavyTask() {
  const isMounted = useMountedState();

  const handleClick = async () => {
    await longRunningOperation();
    if (isMounted()) {
      alert('Task finished!');
    }
  };
}

3. useSafeTimeout

Memory-safe replacement for setTimeout that automatically clears all pending timers on component unmount.

import { useSafeTimeout } from 'react-smart-hooks';

function NotificationBanner() {
  const { setSafeTimeout } = useSafeTimeout();

  const triggerToast = () => {
    setSafeTimeout(() => {
      console.log('Toast closed');
    }, 5000);
  };
}

4. useDebounce

Debounce state updates across render cycles.

import { useDebounce } from 'react-smart-hooks';

function SearchInput() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);
}

---

📄 License

MIT License © 2026 Samarth Nimangre