https://github.com/multum/react-updates

React tool for debugging redundant re-renders
https://github.com/multum/react-updates

debug logging react-updates rerender

Last synced: 3 months ago
JSON representation

React tool for debugging redundant re-renders

• Host: GitHub
• URL: https://github.com/multum/react-updates
• Owner: multum
• License: mit
• Created: 2020-03-02T23:05:28.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2020-12-21T13:22:43.000Z (about 5 years ago)
• Last Synced: 2025-08-31T16:43:31.491Z (4 months ago)
• Topics: debug, logging, react-updates, rerender
• Language: JavaScript
• Homepage:
• Size: 133 KB
• Stars: 9
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-updates

Ease-to-use **React** tool for debugging **redundant re-renders**

![](https://img.shields.io/npm/l/react-updates.svg?style=flat-square)

![](https://img.shields.io/npm/v/react-updates.svg?style=flat-square)

![](https://img.shields.io/bundlephobia/min/react-updates?style=flat-square)

## 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

![](https://img.shields.io/badge/built%20with-love-yellow?style=for-the-badge&color=fe7d37)

![](https://img.shields.io/badge/makes%20people-smile-yellow?style=for-the-badge&color=389ad5)

## Installation

```bash

npm i --save-dev react-updates

# or using yarn

yarn add --dev react-updates

```

OR using UMD build (exports a global `ReactUpdates` object)

```html

```

## Getting started

[![](https://img.shields.io/badge/sandbox-demo-yellow?style=for-the-badge&logo=codesandbox&color=389ad5)](https://codesandbox.io/s/react-updates-zm830)

```javascript

// src/index.js

import { setDebuggerSettings } from 'react-updates';

setDebuggerSettings({

  disabled: process.env.NODE_ENV === 'production',

});

```

```javascript

import { useDebugger } from 'react-updates';

const View = React.memo((props) => {

  useDebugger('View', props);

  return 
{props.content}
;

});


const App = () => {

  const [, setValue] = useState('');

  return (

    


       setValue(e.target.value)} />

       causes re-rendering

        styles={{ width: '100%', display: 'flex' }}

        content="Example use react-updates"

      />

    

  );

};

```




    



## Using a class component

```javascript

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](https://github.com/multum/react-updates/blob/main/LICENSE).