https://github.com/lh0x00/rc-pure-component
a higher-order component to reduce render times quickly for lazy people like me!
https://github.com/lh0x00/rc-pure-component
component fbjs hoc isequal lodash pure pure-component react reduce render shallowcompare
Last synced: about 1 month ago
JSON representation
a higher-order component to reduce render times quickly for lazy people like me!
- Host: GitHub
- URL: https://github.com/lh0x00/rc-pure-component
- Owner: lh0x00
- License: mit
- Created: 2018-05-28T07:35:41.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-18T18:11:31.000Z (over 6 years ago)
- Last Synced: 2024-04-14T02:17:00.510Z (about 1 year ago)
- Topics: component, fbjs, hoc, isequal, lodash, pure, pure-component, react, reduce, render, shallowcompare
- Language: JavaScript
- Homepage:
- Size: 41 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# about
[![npm version][npm-version-image]][npm-url]
[![npm downloads][npm-downloads-image]][npm-url]
[![github issues][github-issues-image]][github-issues-url]
[](https://greenkeeper.io/)
a higher-order component to reduce render times quickly for lazy people like me!
# install
```bash
# use npm
$ npm install rc-pure-component
# or yarn
$ yarn add rc-pure-component
```
# usage
### before
```javascript
const Component = ({ name = 'Hieu' }) => (
hello, {name})
```
### after
```javascript
import pure from 'rc-pure-component'
// normal
const Component = pure(({ name = 'Hieu' }) => (
hello, {name}))
// custom
const shallowCompare = (prevProps, nextProps) => !(prevProps === nextProps)
const Component = pure(({ name = 'Hieu' }) => (
hello, {name}), shallowCompare)
```
# compare
by default I use the calculation of fb, here:
```javascript
import shallowEqual from 'fbjs/lib/shallowEqual'
const shallowCompare = (prevProps, nextProps) => !shallowEqual(prevProps, nextProps)
```
alternatively, you can use the function of the lodash:
```javascript
import isEqual from 'lodash/isEqual'
const shallowCompare = (prevProps, nextProps) => !isEqual(prevProps, nextProps)
```
[npm-url]: https://npmjs.org/package/rc-pure-component
[npm-version-image]: https://badge.fury.io/js/rc-pure-component.svg
[npm-downloads-image]: https://img.shields.io/npm/dm/rc-pure-component.svg
[github-issues-image]: https://img.shields.io/github/issues/lamhieu-vk/rc-pure-component.svg
[github-issues-url]: https://github.com/lamhieu-vk/rc-pure-component/issues