# react-updates

> React tool for debugging redundant re-renders

Latest version **0.3.1** (published 2020-12-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-updates
pnpm add react-updates
yarn add react-updates
bun add react-updates
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2020-12-21 |
| First published | 2020-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Andrew Vereshchak |
| Maintainers | multum |
| Keywords | react, update, render, debug |

## Links

- npm: https://www.npmjs.com/package/react-updates
- Repository: https://github.com/multum/react-updates
- Issues: https://github.com/multum/react-updates/issues
- npm.io page: https://npm.io/package/react-updates

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2020-12-21
- 0.3.0 — 2020-05-12
- 0.2.1 — 2020-03-13
- 0.2.0 — 2020-03-12
- 0.1.1 — 2020-03-10
- 0.0.2 — 2020-03-10
- 0.0.1 — 2020-03-02

## 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
<script src="https://cdn.jsdelivr.net/npm/react-updates/dist/react-updates.min.js"></script>
```

## 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 <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>
  );
};
```

<p align='center'>
    <img width='680px' src='https://raw.githubusercontent.com/multum/react-updates/main/docs/component-styles.png'/>
</p>

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

---
_Source: https://npm.io/package/react-updates · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._