Lightweight React & React Native library to prevent unnecessary re-renders
npm install rn-smart-render# rn-smart-render



> š A React and React Native utility library to detect unnecessary re-renders and optimize performance with helpful hooks.
---
```bash
npm install rn-smart-render
OR
yarn add rn-smart-render
āļø Usage
ā
Track Renders in Your Component
import React from 'react';
import { Text, View } from 'react-native'; // or use div, p for web
import { useRenderLogger } from 'rn-smart-render';
const MyComponent = (props) => {
useRenderLogger('MyComponent', props); // Logs on every render in dev
return (
);
};
š Features
š§ useRenderLogger(name: string, props?: any)
Logs to the console when the component re-renders. Useful in development to catch unnecessary renders.
š§ useDeepCompareMemo(factoryFn, deps)
Memoizes a value with deep comparison on dependencies (not just shallow).
const result = useDeepCompareMemo(() => compute(data), [data]);
š§ useMemoizedCallback(callbackFn, deps)
Stable callback with deep dependency comparison.
const onPress = useMemoizedCallback(() => {
console.log('Pressed!');
}, [someObject]);
š§ Roadmap
useRenderCount ā track number of re-renders
withRenderLogger() ā HOC for class components
Support for render count heatmaps in devtools
š¤ Contributing
We welcome contributions!
Feel free to fork, improve, and PR on GitHub
š License
MIT Ā© Praveen Nayak