https://github.com/soroushchehresa/react-ignore-rerender

🚀 Simple component for ignoring the re-rendering of a piece of React's render method.
https://github.com/soroushchehresa/react-ignore-rerender

npm-package performance react react-component react-ignore-rerender react-performance react-rerender rerender

Last synced: 10 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/soroushchehresa/react-ignore-rerender
• Owner: soroushchehresa
• Created: 2019-01-19T11:53:26.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-08-24T21:37:47.000Z (about 4 years ago)
• Last Synced: 2024-09-26T10:07:57.987Z (about 2 months ago)
• Topics: npm-package, performance, react, react-component, react-ignore-rerender, react-performance, react-rerender, rerender
• Language: JavaScript
• Homepage:
• Size: 515 KB
• Stars: 27
• Watchers: 3
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-ignore-rerender

[![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)

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

## Installation

npm:

```bash

npm i -S react-ignore-rerender

```

yarn:

```bash

yarn add react-ignore-rerender

```




## Usage

Without ```whiteList```:

```jsx

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 (

      


        { showTitle && 
Title
 }

        { showDescription && 
Description
 }

        

          


            
list item 1

            
list item 2

            
list item 3

            
list item 4

            
list item 5

            
list item 6

            
list item 7

          

        

      

    )

  }

}

```


###### NOTE:

```list``` does not rerender at all.

***

With ```whiteList```:

```jsx

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 (

      

        { showTitle && 
Title
 }

        { showDescription && 
Description
 }

      

    )

  }

}

```


###### NOTE:

```ExampleComponent``` does not rerender when changing any props or state except ```showTitle``` and ```showDescription```.




## License

MIT © [soroushchehresa](https://github.com/soroushchehresa)




## Support: