https://github.com/pavlelekic/update-if-props-change

A handy React.js component to prevent re-rendering of sections of larger components that do not need to be re-rendered.
https://github.com/pavlelekic/update-if-props-change

javascript react react-native reactjs

Last synced: about 1 month ago
JSON representation

A handy React.js component to prevent re-rendering of sections of larger components that do not need to be re-rendered.

• Host: GitHub
• URL: https://github.com/pavlelekic/update-if-props-change
• Owner: pavlelekic
• License: mit
• Created: 2017-02-06T16:14:03.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-07T14:47:54.000Z (almost 8 years ago)
• Last Synced: 2024-12-08T10:08:15.990Z (about 1 month ago)
• Topics: javascript, react, react-native, reactjs
• Language: JavaScript
• Size: 8.79 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Do you absolutely need this?

You don’t. You can achieve the same functionality with a lot more typing. What this component does is it prevents rerendering of it’s child components unless some of the variables that they depend on change.

So you could extract those child components into a separate component, implement a `shouldComponentUpdate()` method and you would have the same functionality. With much more typing.

## Instalation

Via npm:

`npm install update-if-props-change --save`

## How to use it

This component is especially useful if you have a big component with few sections that depend on different props/state variables. 

Since all those sections belong to the same component, they will be rerendered whenever any of the props/state variables change. You don’t want that. You want the section of a big component to be re rendered only when variables that that section depends on change.

You can setup this ‘conditional’ re-rendering easy inline with `` component. Here is an example:

```javascript

render() {

  return (

    

      

        

          {this.props.someVar1 + this.state.someVar2}

        

      

      

        

          {this.props.someVar3}

        

      

    

  );

}

```

### Props

`props` - Array of variables that you want to watch for changes. They can be state variables, props, whatever. Whenever any of those variables change, the child components of `` will be rerendered.