# react-pure-check

> A util of react which would be used to judge whether one react component should be update , it aims to improve rendering performance

Latest version **0.1.4** (published 2020-06-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-pure-check
pnpm add react-pure-check
yarn add react-pure-check
bun add react-pure-check
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2020-06-30 |
| First published | 2019-05-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | chenchao17@58.com |
| Maintainers | chenchao17 |
| Keywords | react, shouldComponentUpdate |

## Links

- npm: https://www.npmjs.com/package/react-pure-check
- Repository: https://github.com/liuding-Jason/react-pure-render
- Homepage: https://github.com/liuding-Jason/react-pure-render#readme
- Issues: https://github.com/liuding-Jason/react-pure-render/issues
- npm.io page: https://npm.io/package/react-pure-check

## 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.1.4 (latest) — 2020-06-30
- 0.1.3 — 2019-05-30
- 0.1.2 — 2019-05-29
- 0.1.1 — 2019-05-29
- 0.1.0 — 2019-05-27
- 0.0.2 — 2019-05-23
- 0.0.1 — 2019-05-23

## README

# react-pure-check

A util of react which would be used to judge whether one react component should be update , it aims to improve rendering performance

## Install

```
	npm install react-pure-check --save-dev
```

## How To Use


### Types check

***Types*** could help you to judge the type of a param . 

And at this moment , we ONLY support these types , they are 

'number'、'string'、'boolean'、'undefined'、'null'、'array'、

'function' 、'object' 、'date' .

BE REMEMBER , the lover letters would return for returns .


```
	import { Types } from "react-pure-check" ;
	
	Types(0) ; // number
	Types("abc") ; // string
	Types(function(){}) ; // "function"
	Types([]); // array
	Types({}) ; // object
	Types(new Date()); // date

```

### WhetherEqual 



***WhetherEqual*** help you to compare two given data deeply , 

which contains type-checking and value-checking . 

It should be used in REACT COMPONENT , when you want to judge 

your this.state and nextSate in shouldComponent life part during rendering .

Yes , as you understand , It could help you to avoid useless rendering process 

in your son components , improving your application's performance .

```
	import React , { Component } from "react" ;
	import { WhetherEqual } from "react-pure-check" ;

	export defalut class Test extends Component {
	
		constructor(){
			this.state = {
				list : [{a : 1} , {b : 2}]
			}
		}
		shouldComponent(nextProps , nextState){
			if(WhetherEqual(nextState , this.state)){
				return false ;
			}
			return true ;
		}
		handleClick(){
			this.setState({
				list : [{a : 1} , {b : 2}]
			});
		}
		render(){
			console.log("render") ;
			let {list = []} = this.state ;
			<div className="test">
				<button click={ this.handleClick }></button>
				{
					list && list.map((item , index) => {
						return <div key={`t-key-index-${index}`}>{ item } = { index }</div>
					})
				}
			</div>
		}
	}

```

As your known , when you trigger click event at your button component ,

even if you use setState , but your component would not render again ,

because you had offered the same data . 

### LINCESE

MIT

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