✨ react-smart-memo-z

Smart memoization utilities for React that prevent unnecessary re-renders by tracking which props are actually used during render.

🌟 Why react-smart-memo-z?

React.memo compares all props by reference.
react-smart-memo-z compares only the props you actually read.

✔ Faster renders
✔ Zero config
✔ Works with nested objects
✔ Debuggable render reasons

📦 Installation

npm install react-smart-memo-z

# yarn add react-smart-memo-z

🚀 Usage

smartMemo (HOC)

import { smartMemo } from 'react-smart-memo-z'

type User = {
  name: string
  age: number
}

const UserCard = smartMemo(
  ({ user }: { user: User }) => {
    console.log('render')
    return <div>{user.name}</div>
  },
  { debug: true, name: 'UserCard' }
)

<UserCard user={{ name: 'A', age: 20 }} />
<UserCard user={{ name: 'A', age: 21 }} />

// ❌ no re-render (age not used)

useSmartMemo (Hook)

import { useSmartMemo } from 'react-smart-memo-z'

function Profile({ user }: { user: any }) {
  const smartUser = useSmartMemo(user)
  return <div>{smartUser.name}</div>
}

🧠 How it works

1. Wraps props with Proxy
2. Tracks accessed paths (user.name, settings.theme, …)
3. On next render, compares only used paths
4. Skip render if nothing changed

🐞 Debug Mode

smartMemo(Component, {
  debug: true,
  name: 'MyComponent'
})

Console output:

[SmartMemo] MyComponent re-render because: ['user.name']

🧪 When should you use it?

✅ Large objects as props
✅ Lists with frequent updates
✅ Performance-critical UI
✅ Auto-tracking mainly for dev/debug ✅ Use selector-mode for production ❌ Simple components (React.memo is enough)

📁 API

smartMemo(Component, options?)

| Option | Type | Description | |--------|----------|-------------------------| | debug | boolean | Log re-render reasons | | name | string | Component name in logs | | select | function | Custom selector compare |

📜 License

MIT