react-auto-memo-z 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Delpi.Kye
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,110 @@
+
+## ✨ react-auto-memo-z
+
+[![NPM](https://img.shields.io/npm/v/react-auto-memo-z.svg)](https://www.npmjs.com/package/react-auto-memo-z)
+![Downloads](https://img.shields.io/npm/dt/react-auto-memo-z.svg)
+
+
+Utilities avoids premature optimization while still protecting you from costly re-renders in real-world scenarios..
+
+---
+
+### 🌟 Why react-auto-memo-z?
+
+✔ Memoization only when needed  
+✔ Zero config  
+✔ No dependency mistakes  
+
+---
+
+### 📦 Installation
+
+```bash
+npm install react-auto-memo-z
+# or
+yarn add react-auto-memo-z
+```
+
+---
+
+### 🚀 Usage
+
+#### Snippet 
+```tsx
+import { autoMemo, useAutoMemo } from 'react-auto-memo-z';
+
+type Props = {
+  data: number[];
+};
+
+const HeavyCard = autoMemo(({ data }: Props) => {
+  const total = useAutoMemo(
+    () => {
+      // Simulate an expensive computation
+      let sum = 0;
+      for (let i = 0; i < data.length; i++) {
+        sum += data[i];
+      }
+      return sum;
+    },
+    [data]
+  );
+
+  return <div>Total: {total}</div>;
+});
+
+export default function App() {
+  return <HeavyCard data={[1, 2, 3]} />;
+}
+
+```
+
+#### What happens under the hood?
+
+<b> Initial render (no optimization yet) </b>
+
+- HeavyCard renders normally.
+
+- useAutoMemo executes the factory function.
+
+- The execution time is measured internally.
+
+- If the computation is cheap, no memoization is applied.
+
+<b> Detecting expensive work </b>
+
+- On subsequent renders, if:
+
+- the computation becomes slow, and the dependencies (data) remain referentially stable
+
+- Then: useAutoMemo automatically switches to useMemo
+
+- The computed value is now cached.
+
+---
+
+
+### ✨ Why this approach is different
+
+
+| Traditional              | react-auto-memo               |
+| ------------------------ | ----------------------------- |
+| Dev decides when to memo | Runtime decides automatically |
+| Risk of over-memoization | Memo only when slow           |
+| Boilerplate everywhere   | Clean, readable code          |
+| Hard to debug            | Cost-based heuristics         |
+
+
+---
+
+### 🧪 When should you use it?
+✅ Dashboards with charts  
+✅ Tables with frequent updates  
+✅ Components receiving large objects  
+✅ Performance-critical UI
+
+---
+
+### 📜 License
+
+MIT

package/build/index.cjs.js

@@ -0,0 +1 @@
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).ReactAutoMemo={},e.React)}(this,function(e,r){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(r),u=function(){return u=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var u in r=arguments[t])Object.prototype.hasOwnProperty.call(r,u)&&(e[u]=r[u]);return e},u.apply(this,arguments)};function o(e,r){if(Object.is(e,r))return!0;if("object"!=typeof e||"object"!=typeof r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var u=0,o=t;u<o.length;u++){var a=o[u];if(!Object.prototype.hasOwnProperty.call(r,a))return!1;if(!Object.is(e[a],r[a]))return!1}return!0}"function"==typeof SuppressedError&&SuppressedError,e.autoMemo=function(e,t){var a=void 0===t?{}:t,c=a.thresholdMs,f=void 0===c?8:c,i=a.disable;if(void 0!==i&&i)return e;var l=n.default.memo(e,o),s=function(t){var a=r.useRef(null),c=r.useRef(!1),i=performance.now();n.default.createElement(e,u({},t));var s=performance.now()-i;!c.current&&a.current&&o(a.current,t)&&s>f&&(c.current=!0,console.warn("[react-auto-memo] ".concat(e.name," is slow (").concat(s.toFixed(1),"ms)"))),a.current=t;var p=s>f?l:e;return n.default.createElement(p,u({},t))};return s.displayName="autoMemo(".concat(e.displayName||e.name,")"),s},e.useAutoCallback=function(e){var t=r.useRef(e);return t.current=e,r.useCallback(function(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return t.current.apply(t,e)},[])},e.useAutoMemo=function(e,t,n){void 0===n&&(n={});var u=n.thresholdMs,o=void 0===u?1:u,a=r.useRef(!1),c=r.useMemo(e,t);if(!a.current){var f=performance.now();e(),performance.now()-f>o&&(a.current=!0)}return a.current?c:e()},e.useCallbackOne=function(e){var t=r.useRef(e);return t.current=e,r.useCallback(function(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return t.current.apply(t,e)},[])},e.useMemoOne=function(e,t){var n=r.useRef(null);return n.current&&o(n.current.deps,t)||(n.current={deps:t,value:e()}),n.current.value},Object.defineProperty(e,"__esModule",{value:!0})});

package/build/index.d.ts

@@ -0,0 +1,6 @@
+import { autoMemo } from "./memo/autoMemo";
+import { useAutoCallback } from "./memo/useAutoCallback";
+import { useAutoMemo } from "./memo/useAutoMemo";
+import { useCallbackOne } from "./memo/useCallbackOne";
+import { useMemoOne } from "./memo/useMemoOne";
+export { autoMemo, useAutoCallback, useAutoMemo, useMemoOne, useCallbackOne };

package/build/index.esm.js

@@ -0,0 +1 @@
+import r,{useRef as e,useCallback as n,useMemo as t}from"react";var o=function(){return o=Object.assign||function(r){for(var e,n=1,t=arguments.length;n<t;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r},o.apply(this,arguments)};function c(r,e){if(Object.is(r,e))return!0;if("object"!=typeof r||"object"!=typeof e)return!1;var n=Object.keys(r),t=Object.keys(e);if(n.length!==t.length)return!1;for(var o=0,c=n;o<c.length;o++){var u=c[o];if(!Object.prototype.hasOwnProperty.call(e,u))return!1;if(!Object.is(r[u],e[u]))return!1}return!0}function u(n,t){var u=void 0===t?{}:t,a=u.thresholdMs,i=void 0===a?8:a,f=u.disable;if(void 0!==f&&f)return n;var p=r.memo(n,c),l=function(t){var u=e(null),a=e(!1),f=performance.now();r.createElement(n,o({},t));var l=performance.now()-f;!a.current&&u.current&&c(u.current,t)&&l>i&&(a.current=!0,console.warn("[react-auto-memo] ".concat(n.name," is slow (").concat(l.toFixed(1),"ms)"))),u.current=t;var s=l>i?p:n;return r.createElement(s,o({},t))};return l.displayName="autoMemo(".concat(n.displayName||n.name,")"),l}function a(r){var t=e(r);return t.current=r,n(function(){for(var r=[],e=0;e<arguments.length;e++)r[e]=arguments[e];return t.current.apply(t,r)},[])}function i(r,n,o){void 0===o&&(o={});var c=o.thresholdMs,u=void 0===c?1:c,a=e(!1),i=t(r,n);if(!a.current){var f=performance.now();r(),performance.now()-f>u&&(a.current=!0)}return a.current?i:r()}function f(r){var t=e(r);return t.current=r,n(function(){for(var r=[],e=0;e<arguments.length;e++)r[e]=arguments[e];return t.current.apply(t,r)},[])}function p(r,n){var t=e(null);return t.current&&c(t.current.deps,n)||(t.current={deps:n,value:r()}),t.current.value}"function"==typeof SuppressedError&&SuppressedError;export{u as autoMemo,a as useAutoCallback,i as useAutoMemo,f as useCallbackOne,p as useMemoOne};

package/build/memo/autoMemo.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function autoMemo<T extends React.FC<any>>(Component: T, { thresholdMs, disable }?: {
+    thresholdMs?: number;
+    disable?: boolean;
+}): T;

package/build/memo/shallowEqual.d.ts

@@ -0,0 +1 @@
+export declare function shallowEqual(a: any, b: any): boolean;

package/build/memo/useAutoCallback.d.ts

@@ -0,0 +1 @@
+export declare function useAutoCallback<T extends (...args: any[]) => any>(fn: T): T;

package/build/memo/useAutoMemo.d.ts

@@ -0,0 +1,5 @@
+type Options = {
+    thresholdMs?: number;
+};
+export declare function useAutoMemo<T>(factory: () => T, deps: React.DependencyList, options?: Options): T;
+export {};

package/build/memo/useCallbackOne.d.ts

@@ -0,0 +1 @@
+export declare function useCallbackOne<T extends (...args: any[]) => any>(fn: T): T;

package/build/memo/useMemoOne.d.ts

@@ -0,0 +1 @@
+export declare function useMemoOne<T>(factory: () => T, deps: any[]): T;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "react-auto-memo-z",
+  "version": "1.0.0",
+  "description": "Smart memoization utilities for React that apply optimization only when it’s worth it.",
+  "author": "Delpi.Kye",
+  "license": "MIT",
+
+  "homepage": "https://github.com/delpikye-v/react-auto-memo-z#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/delpikye-v/react-auto-memo-z.git"
+  },
+  "bugs": {
+    "url": "https://github.com/delpikye-v/react-auto-memo-z/issues"
+  },
+
+  "keywords": [
+    "react",
+    "memo",
+    "use-memo",
+    "use-callback",
+    "react-hooks",
+    "performance",
+    "render-optimization",
+    "smart-memo",
+    "react-utils"
+  ],
+
+  "main": "build/index.cjs.js",
+  "module": "build/index.esm.js",
+  "types": "build/index.d.ts",
+
+  "files": [
+    "build"
+  ],
+
+  "sideEffects": false,
+
+  "scripts": {
+    "clean": "rimraf build",
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+
+  "peerDependencies": {
+    "react": ">=17"
+  },
+
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "rimraf": "^5.0.5",
+    "rollup": "^2.56.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "typescript": "^5.3.3",
+    "tslib": "^2.6.2"
+  }
+}