react-ignore-rerender

Simple component to ignore re-rendering of a piece of React's render method

Usage no npm install needed!

<script type="module">
  import reactIgnoreRerender from 'https://cdn.skypack.dev/react-ignore-rerender';
</script>

README

NPM JavaScript Style Guide

react-ignore-rerender

Simple component for ignore re-rendering of a piece of React's render method.

Install

npm:

npm i -S react-ignore-rerender

yarn:

yarn add react-ignore-rerender

Usage

import React, { Component } from 'react';
import IgnoreRerender from 'react-ignore-rerender';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showTitle: false,
      showDescription: false,
    };
  }
  render () {
    const {showTitle, showDescription} = this.state;
    return (
      <IgnoreRerender whiteList={{ showTitle, showDescription }}>
        { showTitle && <h1>Title</h1> }
        { showDescription && <p>Description</p> }
      </IgnoreRerender>
    )
  }
}
NOTE:

ExampleComponent doesn't rerender when changing any props or state except showTitle and showDescription.

License

MIT © soroushchehresa