react-smart-effect

A smart React hook that solves common useEffect problems like dependency confusion, repeated API calls, infinite loops, loading/error boilerplate, debounce, retry, and cleanup — all in one place.

🚀 Why react-smart-effect?

React developers often struggle with:

• Confusing dependency arrays
• Multiple useEffect for one feature
• Infinite loops
• Repeated API calls
• Manual loading & error states
• Forgetting cleanup logic

react-smart-effect abstracts all this complexity into a clean, reusable hook.

✨ Features

• Handles async side-effects cleanly
• Built-in loading and error state
• Debounce support
• Retry failed API calls
• Cancels previous requests
• Prevents infinite loops
• Automatic cleanup
• Lightweight & dependency-free

📦 Installation

Using npm

npm install react-smart-effect

Using yarn

yarn add react-smart-effect

If using scoped package:

npm install @uttam9721/react-smart-effect

🔧 Basic Usage

Step 1: Import the hook

import { useSmartEffect } from "react-smart-effect";

Step 2: Use inside component

function UserProfile({ userId }) {
  const { loading, error } = useSmartEffect(
    async ({ signal }) => {
      const response = await fetch(
        `/api/users/${userId}`,
        { signal }
      );
      const data = await response.json();
      console.log(data);
    },
    {
      deps: [userId],
    }
  );

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error occurred</p>;

  return <div>User Loaded</div>;
}

⚙️ Hook API

useSmartEffect(asyncFunction, options);

Options

• deps – dependency array
• debounce – delay in milliseconds
• retry – retry count
• onError – error callback
• enabled – enable or disable effect

Returns

{
  loading,
  error
}

⏱ Debounce Example

useSmartEffect(
  async () => {
    await fetch(`/api/search?q=${query}`);
  },
  {
    deps: [query],
    debounce: 500,
  }
);

🔁 Retry Example

useSmartEffect(
  async () => {
    await fetch("/api/data");
  },
  {
    retry: 3,
    onError: (err) => alert(err.message),
  }
);

🧠 Real World Use Cases

• API data fetching
• Search with debounce
• Dashboard data loading
• Polling APIs
• Form submit side-effects

👨‍💻 Developer

Uttam Kumar

📄 License

MIT License © 2025