diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a378fbe
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,60 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build output
+dist/
+build/
+
+# TypeScript
+*.tsbuildinfo
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
diff --git a/README.md b/README.md
index 9d21494..ac0c33e 100644
--- a/README.md
+++ b/README.md
@@ -12,49 +12,353 @@ npm install use-async-effekt
### `useAsyncEffekt`
-A hook for handling async effects with proper dependency tracking. The name is intentionally spelled with "k" to work correctly with `react-hooks/exhaustive-deps` ESLint rule.
+A hook for handling async effects with proper dependency tracking and cleanup management. The name is intentionally spelled with "k" to work correctly with `react-hooks/exhaustive-deps` ESLint rule.
+
+The hook provides:
+
+- An `isMounted` callback to check if the component is still mounted
+- A `waitForPrevious` function to wait for previous effects and their cleanup to complete
+- Support for both synchronous and asynchronous cleanup functions
+
+**Features:**
+
+- Proper cleanup handling - waits for async effects to complete before running cleanup
+- Race condition protection when dependencies change rapidly
+- Memory leak prevention with mount status checking
+- Sequential effect execution when needed
+- Support for both sync and async cleanup functions
+
+#### Basic Usage (Without Waiting)
```typescript
import { useAsyncEffekt } from "use-async-effekt";
+import { useState } from "react";
function MyComponent() {
const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ useAsyncEffekt(async ({ isMounted }) => {
+ setLoading(true);
- useAsyncEffekt(async (isMounted: () => boolean) => {
- const result = await fetchData();
- if (isMounted()) setData(result);
+ try {
+ const result = await fetchData();
+ if (isMounted()) {
+ setData(result);
+ setLoading(false);
+ }
+ } catch (error) {
+ if (isMounted()) {
+ console.error("Failed to fetch data:", error);
+ setLoading(false);
+ }
+ }
}, []);
+ if (loading) return Loading...
;
return {data}
;
}
```
+#### Usage with Sequential Effect Execution
+
+When you need to ensure that previous effects complete before starting new ones:
+
+```typescript
+function SearchComponent({ query }) {
+ const [results, setResults] = useState([]);
+ const [loading, setLoading] = useState(false);
+
+ useAsyncEffekt(
+ async ({ isMounted, waitForPrevious }) => {
+ // Wait for any previous search to complete and clean up
+ await waitForPrevious();
+
+ if (!query) return;
+
+ setLoading(true);
+
+ try {
+ const searchResults = await searchAPI(query);
+ if (isMounted()) {
+ setResults(searchResults);
+ setLoading(false);
+ }
+ } catch (error) {
+ if (isMounted()) {
+ console.error("Search failed:", error);
+ setLoading(false);
+ }
+ }
+ },
+ [query]
+ );
+
+ return (
+
+ {loading &&
Searching...
}
+ {results.map((result) => (
+
{result.title}
+ ))}
+
+ {messages.map((msg, i) => (
+
{msg}
+ ))}
+
Status: {status}
;
+}
+```
+
+#### Complex Usage: Sequential Effects with Async Cleanup
+
+```typescript
+function ResourceManager({ resourceId }) {
+ const [resource, setResource] = useState(null);
+ const [status, setStatus] = useState("idle");
+
+ useAsyncEffekt(
+ async ({ isMounted, waitForPrevious }) => {
+ // Ensure previous resource is fully cleaned up before acquiring new one
+ await waitForPrevious();
+
+ if (!resourceId) return;
+
+ setStatus("acquiring");
+
+ try {
+ const newResource = await acquireResource(resourceId);
+
+ if (isMounted()) {
+ setResource(newResource);
+ setStatus("ready");
+ }
+
+ // Return async cleanup to properly release the resource
+ return async () => {
+ setStatus("releasing");
+ await newResource.release();
+ setStatus("idle");
+ console.log(`Resource ${resourceId} released`);
+ };
+ } catch (error) {
+ if (isMounted()) {
+ setStatus("error");
+ console.error("Failed to acquire resource:", error);
+ }
+ }
+ },
+ [resourceId]
+ );
+
+ return (
+
+
Status: {status}
+ {resource &&
Resource ID: {resource.id}
}
+
{userData?.name}
;
+ // userData will be undefined while loading, then contain the result
+ return (
+
+ {userData ? (
+
+
{userData.name}
+
{userData.email}
+
+ ) : (
+
Loading user...
+ )}
+