@usefy/use-unmount 0.0.20

package/README.md

@@ -0,0 +1,143 @@
+# @usefy/use-unmount
+
+A React hook that executes a callback when the component unmounts.
+
+## Features
+
+- **Closure Freshness**: Callback always has access to the latest state/props values
+- **Error Handling**: Errors in callback are caught and don't break unmount
+- **Conditional Execution**: Enable/disable cleanup via `enabled` option
+- **SSR Compatible**: Works safely with server-side rendering
+- **TypeScript Support**: Full type definitions included
+- **Zero Dependencies**: Only peer dependency on React
+
+## Installation
+
+```bash
+npm install @usefy/use-unmount
+# or
+pnpm add @usefy/use-unmount
+# or
+yarn add @usefy/use-unmount
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { useUnmount } from "@usefy/use-unmount";
+
+function MyComponent() {
+  useUnmount(() => {
+    console.log("Component unmounted");
+  });
+
+  return <div>Hello</div>;
+}
+```
+
+### With Latest State Access
+
+```tsx
+import { useState } from "react";
+import { useUnmount } from "@usefy/use-unmount";
+
+function FormComponent() {
+  const [formData, setFormData] = useState({});
+
+  useUnmount(() => {
+    // formData will have the latest value at unmount time
+    saveToLocalStorage(formData);
+  });
+
+  return <form>...</form>;
+}
+```
+
+### Conditional Cleanup
+
+```tsx
+import { useUnmount } from "@usefy/use-unmount";
+
+function TrackingComponent({ trackingEnabled }) {
+  useUnmount(
+    () => {
+      sendAnalyticsEvent("component_unmounted");
+    },
+    { enabled: trackingEnabled }
+  );
+
+  return <div>Tracked content</div>;
+}
+```
+
+### Resource Cleanup
+
+```tsx
+import { useEffect, useRef } from "react";
+import { useUnmount } from "@usefy/use-unmount";
+
+function WebSocketComponent() {
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    wsRef.current = new WebSocket("wss://example.com");
+  }, []);
+
+  useUnmount(() => {
+    wsRef.current?.close();
+  });
+
+  return <div>Connected</div>;
+}
+```
+
+## API
+
+### `useUnmount(callback, options?)`
+
+#### Parameters
+
+| Name | Type | Description |
+|------|------|-------------|
+| `callback` | `() => void` | Function to execute when component unmounts |
+| `options` | `UseUnmountOptions` | Optional configuration |
+
+#### Options
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `enabled` | `boolean` | `true` | Whether to execute callback on unmount |
+
+## React StrictMode
+
+In development with React StrictMode, components are intentionally mounted, unmounted, and remounted to detect side effects. This means the unmount callback may be called multiple times during development. This is expected behavior.
+
+## Error Handling
+
+If the callback throws an error, it will be caught and logged to the console. This prevents unmount errors from breaking the entire component tree unmount process.
+
+## When to Use
+
+Use `useUnmount` when you need to:
+
+- Save data before component removal
+- Send analytics events on component exit
+- Clean up resources that aren't managed by useEffect
+- Log component lifecycle events
+- Perform final state snapshots
+
+## When NOT to Use
+
+Consider using `useEffect` cleanup instead when:
+
+- Cleaning up subscriptions (use `useEffect` return function)
+- Removing event listeners (use `useEventListener` hook)
+- Canceling requests (use abort controllers in `useEffect`)
+
+The key difference is that `useUnmount` guarantees access to the latest values, while `useEffect` cleanup captures values at effect creation time.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,98 @@
+/**
+ * Options for useUnmount hook
+ */
+interface UseUnmountOptions {
+    /**
+     * Whether the unmount callback is enabled.
+     * When false, the callback will not be executed on unmount.
+     * @default true
+     */
+    enabled?: boolean;
+}
+/**
+ * Executes a callback function when the component unmounts.
+ * The callback always has access to the latest values (closure freshness).
+ *
+ * Features:
+ * - Closure freshness: callback always sees latest state/props
+ * - Error handling: errors in callback don't break unmount
+ * - Conditional execution via `enabled` option
+ * - SSR compatible
+ * - TypeScript support
+ *
+ * @param callback - The function to execute on unmount
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * function MyComponent() {
+ *   useUnmount(() => {
+ *     console.log("Component unmounted");
+ *   });
+ *
+ *   return <div>Hello</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With latest state access
+ * function FormComponent() {
+ *   const [formData, setFormData] = useState({});
+ *
+ *   useUnmount(() => {
+ *     // formData will have the latest value at unmount time
+ *     saveToLocalStorage(formData);
+ *   });
+ *
+ *   return <form>...</form>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Conditional cleanup
+ * function TrackingComponent({ trackingEnabled }) {
+ *   useUnmount(
+ *     () => {
+ *       sendAnalyticsEvent("component_unmounted");
+ *     },
+ *     { enabled: trackingEnabled }
+ *   );
+ *
+ *   return <div>Tracked content</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Resource cleanup
+ * function WebSocketComponent() {
+ *   const wsRef = useRef<WebSocket | null>(null);
+ *
+ *   useEffect(() => {
+ *     wsRef.current = new WebSocket("wss://example.com");
+ *   }, []);
+ *
+ *   useUnmount(() => {
+ *     wsRef.current?.close();
+ *   });
+ *
+ *   return <div>Connected</div>;
+ * }
+ * ```
+ *
+ * @remarks
+ * **React StrictMode**: In development with StrictMode, React intentionally
+ * mounts, unmounts, and remounts components to detect side effects. This means
+ * the unmount callback may be called multiple times during development.
+ * This is expected behavior and helps identify issues with cleanup logic.
+ *
+ * **Error Handling**: If the callback throws an error, it will be caught and
+ * logged to the console. This prevents unmount errors from breaking
+ * the entire component tree unmount process.
+ */
+declare function useUnmount(callback: () => void, options?: UseUnmountOptions): void;
+
+export { type UseUnmountOptions, useUnmount };

package/dist/index.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Options for useUnmount hook
+ */
+interface UseUnmountOptions {
+    /**
+     * Whether the unmount callback is enabled.
+     * When false, the callback will not be executed on unmount.
+     * @default true
+     */
+    enabled?: boolean;
+}
+/**
+ * Executes a callback function when the component unmounts.
+ * The callback always has access to the latest values (closure freshness).
+ *
+ * Features:
+ * - Closure freshness: callback always sees latest state/props
+ * - Error handling: errors in callback don't break unmount
+ * - Conditional execution via `enabled` option
+ * - SSR compatible
+ * - TypeScript support
+ *
+ * @param callback - The function to execute on unmount
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * function MyComponent() {
+ *   useUnmount(() => {
+ *     console.log("Component unmounted");
+ *   });
+ *
+ *   return <div>Hello</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With latest state access
+ * function FormComponent() {
+ *   const [formData, setFormData] = useState({});
+ *
+ *   useUnmount(() => {
+ *     // formData will have the latest value at unmount time
+ *     saveToLocalStorage(formData);
+ *   });
+ *
+ *   return <form>...</form>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Conditional cleanup
+ * function TrackingComponent({ trackingEnabled }) {
+ *   useUnmount(
+ *     () => {
+ *       sendAnalyticsEvent("component_unmounted");
+ *     },
+ *     { enabled: trackingEnabled }
+ *   );
+ *
+ *   return <div>Tracked content</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Resource cleanup
+ * function WebSocketComponent() {
+ *   const wsRef = useRef<WebSocket | null>(null);
+ *
+ *   useEffect(() => {
+ *     wsRef.current = new WebSocket("wss://example.com");
+ *   }, []);
+ *
+ *   useUnmount(() => {
+ *     wsRef.current?.close();
+ *   });
+ *
+ *   return <div>Connected</div>;
+ * }
+ * ```
+ *
+ * @remarks
+ * **React StrictMode**: In development with StrictMode, React intentionally
+ * mounts, unmounts, and remounts components to detect side effects. This means
+ * the unmount callback may be called multiple times during development.
+ * This is expected behavior and helps identify issues with cleanup logic.
+ *
+ * **Error Handling**: If the callback throws an error, it will be caught and
+ * logged to the console. This prevents unmount errors from breaking
+ * the entire component tree unmount process.
+ */
+declare function useUnmount(callback: () => void, options?: UseUnmountOptions): void;
+
+export { type UseUnmountOptions, useUnmount };

package/dist/index.js

@@ -0,0 +1,50 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useUnmount: () => useUnmount
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useUnmount.ts
+var import_react = require("react");
+function useUnmount(callback, options = {}) {
+  const { enabled = true } = options;
+  const callbackRef = (0, import_react.useRef)(callback);
+  callbackRef.current = callback;
+  (0, import_react.useEffect)(() => {
+    if (!enabled) {
+      return;
+    }
+    return () => {
+      try {
+        callbackRef.current();
+      } catch (error) {
+        console.error("useUnmount: Error in unmount callback:", error);
+      }
+    };
+  }, [enabled]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useUnmount
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useUnmount.ts"],"sourcesContent":["export { useUnmount } from \"./useUnmount\";\nexport type { UseUnmountOptions } from \"./useUnmount\";\n","import { useEffect, useRef } from \"react\";\n\n/**\n * Options for useUnmount hook\n */\nexport interface UseUnmountOptions {\n  /**\n   * Whether the unmount callback is enabled.\n   * When false, the callback will not be executed on unmount.\n   * @default true\n   */\n  enabled?: boolean;\n}\n\n/**\n * Executes a callback function when the component unmounts.\n * The callback always has access to the latest values (closure freshness).\n *\n * Features:\n * - Closure freshness: callback always sees latest state/props\n * - Error handling: errors in callback don't break unmount\n * - Conditional execution via `enabled` option\n * - SSR compatible\n * - TypeScript support\n *\n * @param callback - The function to execute on unmount\n * @param options - Configuration options\n *\n * @example\n * ```tsx\n * // Basic usage\n * function MyComponent() {\n *   useUnmount(() => {\n *     console.log(\"Component unmounted\");\n *   });\n *\n *   return <div>Hello</div>;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With latest state access\n * function FormComponent() {\n *   const [formData, setFormData] = useState({});\n *\n *   useUnmount(() => {\n *     // formData will have the latest value at unmount time\n *     saveToLocalStorage(formData);\n *   });\n *\n *   return <form>...</form>;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Conditional cleanup\n * function TrackingComponent({ trackingEnabled }) {\n *   useUnmount(\n *     () => {\n *       sendAnalyticsEvent(\"component_unmounted\");\n *     },\n *     { enabled: trackingEnabled }\n *   );\n *\n *   return <div>Tracked content</div>;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Resource cleanup\n * function WebSocketComponent() {\n *   const wsRef = useRef<WebSocket | null>(null);\n *\n *   useEffect(() => {\n *     wsRef.current = new WebSocket(\"wss://example.com\");\n *   }, []);\n *\n *   useUnmount(() => {\n *     wsRef.current?.close();\n *   });\n *\n *   return <div>Connected</div>;\n * }\n * ```\n *\n * @remarks\n * **React StrictMode**: In development with StrictMode, React intentionally\n * mounts, unmounts, and remounts components to detect side effects. This means\n * the unmount callback may be called multiple times during development.\n * This is expected behavior and helps identify issues with cleanup logic.\n *\n * **Error Handling**: If the callback throws an error, it will be caught and\n * logged to the console. This prevents unmount errors from breaking\n * the entire component tree unmount process.\n */\nexport function useUnmount(\n  callback: () => void,\n  options: UseUnmountOptions = {}\n): void {\n  const { enabled = true } = options;\n\n  // Store callback in ref to always have the latest version\n  // This ensures closure freshness - the callback at unmount time\n  // will have access to the most recent state/props values\n  const callbackRef = useRef(callback);\n\n  // Update the ref on every render to capture latest callback\n  callbackRef.current = callback;\n\n  useEffect(() => {\n    // If disabled, don't set up cleanup\n    if (!enabled) {\n      return;\n    }\n\n    // Return cleanup function\n    return () => {\n      try {\n        callbackRef.current();\n      } catch (error) {\n        // Log the error to help with debugging\n        // Catch to prevent breaking other unmounts in the component tree\n        console.error(\"useUnmount: Error in unmount callback:\", error);\n      }\n    };\n  }, [enabled]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkC;AAkG3B,SAAS,WACd,UACA,UAA6B,CAAC,GACxB;AACN,QAAM,EAAE,UAAU,KAAK,IAAI;AAK3B,QAAM,kBAAc,qBAAO,QAAQ;AAGnC,cAAY,UAAU;AAEtB,8BAAU,MAAM;AAEd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAGA,WAAO,MAAM;AACX,UAAI;AACF,oBAAY,QAAQ;AAAA,MACtB,SAAS,OAAO;AAGd,gBAAQ,MAAM,0CAA0C,KAAK;AAAA,MAC/D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AACd;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,23 @@
+// src/useUnmount.ts
+import { useEffect, useRef } from "react";
+function useUnmount(callback, options = {}) {
+  const { enabled = true } = options;
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    return () => {
+      try {
+        callbackRef.current();
+      } catch (error) {
+        console.error("useUnmount: Error in unmount callback:", error);
+      }
+    };
+  }, [enabled]);
+}
+export {
+  useUnmount
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useUnmount.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\n/**\n * Options for useUnmount hook\n */\nexport interface UseUnmountOptions {\n  /**\n   * Whether the unmount callback is enabled.\n   * When false, the callback will not be executed on unmount.\n   * @default true\n   */\n  enabled?: boolean;\n}\n\n/**\n * Executes a callback function when the component unmounts.\n * The callback always has access to the latest values (closure freshness).\n *\n * Features:\n * - Closure freshness: callback always sees latest state/props\n * - Error handling: errors in callback don't break unmount\n * - Conditional execution via `enabled` option\n * - SSR compatible\n * - TypeScript support\n *\n * @param callback - The function to execute on unmount\n * @param options - Configuration options\n *\n * @example\n * ```tsx\n * // Basic usage\n * function MyComponent() {\n *   useUnmount(() => {\n *     console.log(\"Component unmounted\");\n *   });\n *\n *   return <div>Hello</div>;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With latest state access\n * function FormComponent() {\n *   const [formData, setFormData] = useState({});\n *\n *   useUnmount(() => {\n *     // formData will have the latest value at unmount time\n *     saveToLocalStorage(formData);\n *   });\n *\n *   return <form>...</form>;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Conditional cleanup\n * function TrackingComponent({ trackingEnabled }) {\n *   useUnmount(\n *     () => {\n *       sendAnalyticsEvent(\"component_unmounted\");\n *     },\n *     { enabled: trackingEnabled }\n *   );\n *\n *   return <div>Tracked content</div>;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Resource cleanup\n * function WebSocketComponent() {\n *   const wsRef = useRef<WebSocket | null>(null);\n *\n *   useEffect(() => {\n *     wsRef.current = new WebSocket(\"wss://example.com\");\n *   }, []);\n *\n *   useUnmount(() => {\n *     wsRef.current?.close();\n *   });\n *\n *   return <div>Connected</div>;\n * }\n * ```\n *\n * @remarks\n * **React StrictMode**: In development with StrictMode, React intentionally\n * mounts, unmounts, and remounts components to detect side effects. This means\n * the unmount callback may be called multiple times during development.\n * This is expected behavior and helps identify issues with cleanup logic.\n *\n * **Error Handling**: If the callback throws an error, it will be caught and\n * logged to the console. This prevents unmount errors from breaking\n * the entire component tree unmount process.\n */\nexport function useUnmount(\n  callback: () => void,\n  options: UseUnmountOptions = {}\n): void {\n  const { enabled = true } = options;\n\n  // Store callback in ref to always have the latest version\n  // This ensures closure freshness - the callback at unmount time\n  // will have access to the most recent state/props values\n  const callbackRef = useRef(callback);\n\n  // Update the ref on every render to capture latest callback\n  callbackRef.current = callback;\n\n  useEffect(() => {\n    // If disabled, don't set up cleanup\n    if (!enabled) {\n      return;\n    }\n\n    // Return cleanup function\n    return () => {\n      try {\n        callbackRef.current();\n      } catch (error) {\n        // Log the error to help with debugging\n        // Catch to prevent breaking other unmounts in the component tree\n        console.error(\"useUnmount: Error in unmount callback:\", error);\n      }\n    };\n  }, [enabled]);\n}\n"],"mappings":";AAAA,SAAS,WAAW,cAAc;AAkG3B,SAAS,WACd,UACA,UAA6B,CAAC,GACxB;AACN,QAAM,EAAE,UAAU,KAAK,IAAI;AAK3B,QAAM,cAAc,OAAO,QAAQ;AAGnC,cAAY,UAAU;AAEtB,YAAU,MAAM;AAEd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAGA,WAAO,MAAM;AACX,UAAI;AACF,oBAAY,QAAQ;AAAA,MACtB,SAAS,OAAO;AAGd,gBAAQ,MAAM,0CAA0C,KAAK;AAAA,MAC/D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AACd;","names":[]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@usefy/use-unmount",
+  "version": "0.0.20",
+  "description": "A React hook that executes a callback when the component unmounts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@types/react": "^19.0.0",
+    "jsdom": "^27.3.0",
+    "react": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/geon0529/usefy.git",
+    "directory": "packages/use-unmount"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "hooks",
+    "unmount",
+    "cleanup",
+    "lifecycle",
+    "useUnmount",
+    "useEffect"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist"
+  }
+}