Repository files navigation

Ease-to-useReact tool for debuggingredundant re-renders

Trying to minimize the number of re-renders in our components usingPureComponent orReact.memo, developers spend a lot of time debugging redundant re-renders

react-updates is designed to simplify this process

npm i --save-dev react-updates# or using yarnyarn add --dev react-updates

OR using UMD build (exports a globalReactUpdates object)

<scriptsrc="https://cdn.jsdelivr.net/npm/react-updates/dist/react-updates.min.js"></script>

// src/index.jsimport{setDebuggerSettings}from'react-updates';setDebuggerSettings({disabled:process.env.NODE_ENV==='production',});

import{useDebugger}from'react-updates';constView=React.memo((props)=>{useDebugger('View',props);return<divstyle={props.styles}>{props.content}</div>;});constApp=()=>{const[,setValue]=useState('');return(<div><inputonChange={(e)=>setValue(e.target.value)}/><View// < ❗ > causes re-renderingstyles={{width:'100%',display:'flex'}}content="Example use react-updates"/></div>);};

import{debugComponentUpdate}from'react-updates';classViewextendsPureComponent{componentDidUpdate(prevProps){debugComponentUpdate(View,prevProps,this.props);}// ...}

Suggestions for introducing new features, bug reports, and any other suggestions can be written in the issue. They will be reviewed immediately.

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.

Pleaseask first if somebody else is already working on this or the core developers think your feature is in-scope forreact-updates. Generally always have a related issue with discussions for whatever you are including.

Please also provide atest plan, i.e. specify how you verified that your addition works.

react-updates is open source softwarelicensed as MIT.