🚀 react-native-perf-tools

⚡ Performance & Debugging Toolkit for React Native

✨ Overview

react-native-perf-tools helps you detect and fix performance issues in React Native apps.

Most apps suffer from:

• ❌ Unnecessary re-renders
• ❌ Hard-to-debug performance issues
• ❌ Inefficient hooks usage

👉 This library gives you tools to track, debug, and optimize rendering behavior

📦 Installation

npm install react-native-perf-tools

🚀 Quick Example

import {
  smartMemo,
  useWhyDidYouRender,
  useRenderCount,
  useSmartEffect,
} from 'react-native-perf-tools';

const Demo = (props) => {
  const renderCount = useRenderCount();

  useWhyDidYouRender('DemoComponent', props);

  useSmartEffect(() => {
    console.log('Effect triggered 🚀');
  }, [props]);

  return <Text>Render Count: {renderCount}</Text>;
};

export default smartMemo(Demo, {
  debug: true,
});

🔥 Features

Core Performance

• ⚡ smartMemo → Advanced React.memo
• 🧠 useSmartMemo → Deep dependency memoization
• 🔁 useSmartCallback → Stable function references
• 🎯 useSmartEffect → Optimized effect execution

Debugging

• 🔍 useWhyDidYouRender → Detect unnecessary renders
• 🔢 useRenderCount → Track render frequency

New Hooks (v1.1.0)

• 🧭 usePrevious → Access previous value
• ⏱ useDebounce → Delay value updates
• 🧊 useStableValue → Prevent object re-creation
• 🧪 useDeepCompareEffect → Deep dependency effect

🧠 API + EXAMPLES

⚡ smartMemo

const Optimized = smartMemo(Component, {
  deepCompare: true,
  debug: true,
  ignoreProps: ['style'],
});

👉 Prevent unnecessary re-renders with smart comparison

🔍 useWhyDidYouRender

useWhyDidYouRender('ProfileCard', props);

👉 Logs which props changed

🔢 useRenderCount

const count = useRenderCount();
<Text>Render: {count}</Text>

👉 Track how many times component renders

🧠 useSmartMemo

const filteredList = useSmartMemo(list, [list]);

👉 Avoid expensive recalculations

🔁 useSmartCallback

const handleClick = useSmartCallback(() => {
  console.log('clicked');
}, []);

👉 Prevent callback recreation

🎯 useSmartEffect

useSmartEffect(() => {
  fetchData();
}, [filters]);

👉 Runs only when deps truly change

🆕 NEW HOOKS

🧭 usePrevious

const prevValue = usePrevious(value);

console.log('Previous:', prevValue);

👉 Compare previous vs current value

⏱ useDebounce

const debouncedSearch = useDebounce(search, 500);

👉 Useful for API calls / search input

🧊 useStableValue

const stableUser = useStableValue(user);

👉 Prevent unnecessary re-renders from object changes

🧪 useDeepCompareEffect

useDeepCompareEffect(() => {
  fetchData();
}, [filters]);

👉 Deep compare dependencies

🧪 Example Output

[PerfTools] Re-render: { count: { from: 1, to: 2 } }
[PerfTools] [WhyDidYouRender] ProfileCard { name: {...} }

🎯 Real Use Cases

• Optimize FlatList performance
• Debug re-render issues
• Prevent unnecessary API calls
• Improve app responsiveness
• Handle complex dependency objects

⚙️ Compatibility

• React Native ≥ 0.70
• React ≥ 17

📄 License

MIT

👨‍💻 Author

Yash Modi

⭐ Support

If you find this useful:

👉 ⭐ Star the repo 👉 🔁 Share with dev community

🚀 Roadmap

• [ ] FlatList advanced optimization
• [ ] Performance analytics
• [ ] DevTools integration
• [ ] Debug overlay UI