├── .travis.yml
├── src
    ├── .eslintrc
    ├── styles.css
    ├── test.js
    └── index.js
├── .babelrc
├── .editorconfig
├── .gitignore
├── .eslintrc
├── rollup.config.js
├── package.json
└── README.md


/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 9
4 |   - 8
5 | 


--------------------------------------------------------------------------------
/src/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "env": {
3 |     "jest": true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false
 5 |     }],
 6 |     "stage-0",
 7 |     "react"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* add css styles here (optional) */
2 | 
3 | .test {
4 |   display: inline-block;
5 |   margin: 2em auto;
6 |   border: 2px solid #000;
7 |   font-size: 2em;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/test.js:
--------------------------------------------------------------------------------
1 | import ExampleComponent from './'
2 | 
3 | describe('ExampleComponent', () => {
4 |   it('is truthy', () => {
5 |     expect(ExampleComponent).toBeTruthy()
6 |   })
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 3 | 
 4 | # dependencies
 5 | node_modules
 6 | 
 7 | # IDEs and editors
 8 | /.idea
 9 | 
10 | # builds
11 | build
12 | dist
13 | .rpt2_cache
14 | 
15 | # misc
16 | .DS_Store
17 | .env
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 | 
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "extends": [
 4 |     "standard",
 5 |     "standard-react"
 6 |   ],
 7 |   "env": {
 8 |     "es6": true
 9 |   },
10 |   "plugins": [
11 |     "react"
12 |   ],
13 |   "parserOptions": {
14 |     "sourceType": "module"
15 |   },
16 |   "rules": {
17 |     // don't force es6 functions to include space before paren
18 |     "space-before-function-paren": 0,
19 | 
20 |     // allow specifying true explicitly for boolean props
21 |     "react/jsx-boolean-value": 0
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { Component } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | class IgnoreRerender extends Component {
 5 |   shouldComponentUpdate(np) {
 6 |     const { whiteList } = this.props
 7 |     let shouldComponentUpdate = false
 8 |     Object.keys(whiteList)
 9 |       .forEach((includeItem) => {
10 |         if ((whiteList[includeItem] !== np.whiteList[includeItem])) {
11 |           shouldComponentUpdate = true
12 |         }
13 |       })
14 |     return shouldComponentUpdate
15 |   }
16 |   render = () => this.props.children
17 | }
18 | 
19 | IgnoreRerender.propTypes = {
20 |   whiteList: PropTypes.object,
21 |   children: PropTypes.element.isRequired
22 | }
23 | 
24 | IgnoreRerender.defaultProps = {
25 |   whiteList: {}
26 | }
27 | 
28 | export default IgnoreRerender
29 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import babel from 'rollup-plugin-babel'
 2 | import commonjs from 'rollup-plugin-commonjs'
 3 | import external from 'rollup-plugin-peer-deps-external'
 4 | import postcss from 'rollup-plugin-postcss'
 5 | import resolve from 'rollup-plugin-node-resolve'
 6 | import url from 'rollup-plugin-url'
 7 | import svgr from '@svgr/rollup'
 8 | 
 9 | import pkg from './package.json'
10 | 
11 | export default {
12 |   input: 'src/index.js',
13 |   output: [
14 |     {
15 |       file: pkg.main,
16 |       format: 'cjs',
17 |       sourcemap: true
18 |     },
19 |     {
20 |       file: pkg.module,
21 |       format: 'es',
22 |       sourcemap: true
23 |     }
24 |   ],
25 |   plugins: [
26 |     external(),
27 |     postcss({
28 |       modules: true
29 |     }),
30 |     url(),
31 |     svgr(),
32 |     babel({
33 |       exclude: 'node_modules/**',
34 |       plugins: [ 'external-helpers' ]
35 |     }),
36 |     resolve(),
37 |     commonjs()
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-ignore-rerender",
 3 |   "version": "1.3.2",
 4 |   "description": "Simple component to ignore re-rendering of a piece of React's render method",
 5 |   "author": "soroushchehresa",
 6 |   "license": "MIT",
 7 |   "repository": "soroushchehresa/react-ignore-rerender",
 8 |   "main": "dist/index.js",
 9 |   "module": "dist/index.es.js",
10 |   "jsnext:main": "dist/index.es.js",
11 |   "engines": {
12 |     "node": ">=8",
13 |     "npm": ">=5"
14 |   },
15 |   "scripts": {
16 |     "test": "cross-env CI=1 react-scripts test --env=jsdom",
17 |     "test:watch": "react-scripts test --env=jsdom",
18 |     "build": "rollup -c",
19 |     "start": "rollup -c -w",
20 |     "prepare": "yarn run build",
21 |     "predeploy": "cd example && yarn install && yarn run build",
22 |     "deploy": "gh-pages -d example/build"
23 |   },
24 |   "peerDependencies": {
25 |     "prop-types": "^15.5.4",
26 |     "react": "^15.0.0 || ^16.0.0",
27 |     "react-dom": "^15.0.0 || ^16.0.0"
28 |   },
29 |   "devDependencies": {
30 |     "@svgr/rollup": "^2.4.1",
31 |     "babel-core": "^6.26.3",
32 |     "babel-eslint": "^8.2.5",
33 |     "babel-plugin-external-helpers": "^6.22.0",
34 |     "babel-preset-env": "^1.7.0",
35 |     "babel-preset-react": "^6.24.1",
36 |     "babel-preset-stage-0": "^6.24.1",
37 |     "cross-env": "^5.1.4",
38 |     "eslint": "^5.0.1",
39 |     "eslint-config-standard": "^11.0.0",
40 |     "eslint-config-standard-react": "^6.0.0",
41 |     "eslint-plugin-import": "^2.13.0",
42 |     "eslint-plugin-node": "^7.0.1",
43 |     "eslint-plugin-promise": "^4.0.0",
44 |     "eslint-plugin-react": "^7.10.0",
45 |     "eslint-plugin-standard": "^3.1.0",
46 |     "gh-pages": "^1.2.0",
47 |     "react": "^16.4.1",
48 |     "react-dom": "^16.4.1",
49 |     "react-scripts": "^1.1.4",
50 |     "rollup": "^0.64.1",
51 |     "rollup-plugin-babel": "^3.0.7",
52 |     "rollup-plugin-commonjs": "^9.1.3",
53 |     "rollup-plugin-node-resolve": "^3.3.0",
54 |     "rollup-plugin-peer-deps-external": "^2.2.0",
55 |     "rollup-plugin-postcss": "^1.6.2",
56 |     "rollup-plugin-url": "^1.4.0"
57 |   },
58 |   "files": [
59 |     "dist"
60 |   ],
61 |   "keywords": [
62 |     "react",
63 |     "rerender",
64 |     "render",
65 |     "rendering",
66 |     "ignore",
67 |     "performance"
68 |   ]
69 | }
70 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-ignore-rerender
  2 | [![NPM](https://img.shields.io/npm/v/react-ignore-rerender.svg)](https://www.npmjs.com/package/react-ignore-rerender) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
  3 | 
  4 | Simple component for ignoring the re-rendering of a piece of React's render method.
  5 | 
  6 | ## Installation
  7 | 
  8 | npm:
  9 | 
 10 | ```bash
 11 | npm i -S react-ignore-rerender
 12 | ```
 13 | 
 14 | 
 15 | yarn:
 16 | 
 17 | ```bash
 18 | yarn add react-ignore-rerender
 19 | ```
 20 | 
 21 | <br />
 22 | 
 23 | ## Usage
 24 | 
 25 | Without ```whiteList```:
 26 | 
 27 | ```jsx
 28 | import React, { Component } from 'react';
 29 | import IgnoreRerender from 'react-ignore-rerender';
 30 | 
 31 | class ExampleComponent extends Component {
 32 |   constructor(props) {
 33 |     super(props);
 34 |     this.state = {
 35 |       showTitle: true,
 36 |       showDescription: true,
 37 |     };
 38 |   }
 39 |   render () {
 40 |     const {showTitle, showDescription} = this.state;
 41 |     return (
 42 |       <div>
 43 |         { showTitle && <h1>Title</h1> }
 44 |         { showDescription && <p>Description</p> }
 45 |         <IgnoreRerender>
 46 |           <ul className="list">
 47 |             <li className="list-item">list item 1</li>
 48 |             <li className="list-item">list item 2</li>
 49 |             <li className="list-item">list item 3</li>
 50 |             <li className="list-item">list item 4</li>
 51 |             <li className="list-item">list item 5</li>
 52 |             <li className="list-item">list item 6</li>
 53 |             <li className="list-item">list item 7</li>
 54 |           </ul>
 55 |         </IgnoreRerender>
 56 |       </div>
 57 |     )
 58 |   }
 59 | }
 60 | ```
 61 | 
 62 | ###### NOTE:
 63 | 
 64 | ```list``` does not rerender at all.
 65 | 
 66 | ***
 67 | 
 68 | With ```whiteList```:
 69 | 
 70 | ```jsx
 71 | import React, { Component } from 'react';
 72 | import IgnoreRerender from 'react-ignore-rerender';
 73 | 
 74 | class ExampleComponent extends Component {
 75 |   constructor(props) {
 76 |     super(props);
 77 |     this.state = {
 78 |       showTitle: true,
 79 |       showDescription: true,
 80 |     };
 81 |   }
 82 |   render () {
 83 |     const {showTitle, showDescription} = this.state;
 84 |     return (
 85 |       <IgnoreRerender whiteList={{ showTitle, showDescription }}>
 86 |         { showTitle && <h1>Title</h1> }
 87 |         { showDescription && <p>Description</p> }
 88 |       </IgnoreRerender>
 89 |     )
 90 |   }
 91 | }
 92 | ```
 93 | 
 94 | ###### NOTE:
 95 | 
 96 | ```ExampleComponent``` does not rerender when changing any props or state except ```showTitle``` and ```showDescription```.
 97 | 
 98 | <br />
 99 | 
100 | ## License
101 | MIT © [soroushchehresa](https://github.com/soroushchehresa)
102 | 
103 | <br />
104 | 
105 | ## Support:
106 | <a href="https://www.patreon.com/soroushchehresa">
107 | 	<img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
108 | </a>
109 | 
110 | 


--------------------------------------------------------------------------------