Skip to content

🚀 Simple component for ignoring the re-rendering of a piece of React's render method.

Notifications You must be signed in to change notification settings

soroushchehresa/react-ignore-rerender

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-ignore-rerender

NPM JavaScript Style Guide

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

Installation

npm:

npm i -S react-ignore-rerender

yarn:

yarn add react-ignore-rerender

Usage

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:

About

🚀 Simple component for ignoring the re-rendering of a piece of React's render method.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published