react-ignore-rerender
Simple component for ignoring the re-rendering of a piece of React's render method.
Installation
npm:
npm i -S react-ignore-rerenderyarn:
yarn add react-ignore-rerenderUsage
Without whiteList:
import React, { Component } from 'react';
import IgnoreRerender from 'react-ignore-rerender';
class ExampleComponent extends Component {
constructor(props) {
super(props);
this.state = {
showTitle: true,
showDescription: true,
};
}
render () {
const {showTitle, showDescription} = this.state;
return (
<div>
{ showTitle && <h1>Title</h1> }
{ showDescription && <p>Description</p> }
<IgnoreRerender>
<ul className="list">
<li className="list-item">list item 1</li>
<li className="list-item">list item 2</li>
<li className="list-item">list item 3</li>
<li className="list-item">list item 4</li>
<li className="list-item">list item 5</li>
<li className="list-item">list item 6</li>
<li className="list-item">list item 7</li>
</ul>
</IgnoreRerender>
</div>
)
}
}NOTE:
list does not rerender at all.
With whiteList:
import React, { Component } from 'react';
import IgnoreRerender from 'react-ignore-rerender';
class ExampleComponent extends Component {
constructor(props) {
super(props);
this.state = {
showTitle: true,
showDescription: true,
};
}
render () {
const {showTitle, showDescription} = this.state;
return (
<IgnoreRerender whiteList={{ showTitle, showDescription }}>
{ showTitle && <h1>Title</h1> }
{ showDescription && <p>Description</p> }
</IgnoreRerender>
)
}
}NOTE:
ExampleComponent does not rerender when changing any props or state except showTitle and showDescription.
License
MIT © soroushchehresa
Support:
