✨ react-auto-memo-z

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

npm install react-auto-memo-z
# or
yarn add react-auto-memo-z

🚀 Usage

Snippet

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?

Initial render (no optimization yet)

• HeavyCard renders normally.

• useAutoMemo executes the factory function.

• The execution time is measured internally.

• If the computation is cheap, no memoization is applied.

Detecting expensive work

• 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