react-updates
Ease-to-use React tool for debugging redundant re-renders
Motivation
Trying to minimize the number of re-renders in our components using PureComponent
or React.memo
, developers spend a lot of time debugging redundant re-renders
react-updates
is designed to simplify this process
Installation
npm i --save-dev react-updates
# or using yarn
yarn add --dev react-updates
OR using UMD build (exports a global ReactUpdates
object)
<script src="https://cdn.jsdelivr.net/npm/react-updates/dist/react-updates.min.js"></script>
Getting started
// src/index.js
import { setDebuggerSettings } from 'react-updates';
setDebuggerSettings({
disabled: process.env.NODE_ENV === 'production',
});
import { useDebugger } from 'react-updates';
const View = React.memo((props) => {
useDebugger('View', props);
return <div style={props.styles}>{props.content}</div>;
});
const App = () => {
const [, setValue] = useState('');
return (
<div>
<input onChange={(e) => setValue(e.target.value)} />
<View
// < ❗ > causes re-rendering
styles={{ width: '100%', display: 'flex' }}
content="Example use react-updates"
/>
</div>
);
};
Using a class component
import { debugComponentUpdate } from 'react-updates';
class View extends PureComponent {
componentDidUpdate(prevProps) {
debugComponentUpdate(View, prevProps, this.props);
}
// ...
}
Contributing
Issue
Suggestions for introducing new features, bug reports, and any other suggestions can be written in the issue. They will be reviewed immediately.
Pull Request
Good pull requests, such as patches, improvements, and new features, are a fantastic help. They should remain focused in scope and avoid containing unrelated commits.
Please ask first if somebody else is already working on this or the core developers think your feature is in-scope for react-updates. Generally always have a related issue with discussions for whatever you are including.
Please also provide a test plan, i.e. specify how you verified that your addition works.
License
react-updates is open source software licensed as MIT.