https://github.com/codepunkt/should-not-update
Declarative shouldComponentUpdate wrapper
https://github.com/codepunkt/should-not-update
Last synced: 9 months ago
JSON representation
Declarative shouldComponentUpdate wrapper
- Host: GitHub
- URL: https://github.com/codepunkt/should-not-update
- Owner: codepunkt
- Created: 2017-01-14T21:48:27.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-30T20:53:19.000Z (about 8 years ago)
- Last Synced: 2024-09-15T00:58:33.152Z (over 1 year ago)
- Language: JavaScript
- Size: 64.5 KB
- Stars: 4
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ShouldNotUpdate
[](https://badge.fury.io/js/should-not-update) [](https://travis-ci.org/codepunkt/should-not-update) [](https://coveralls.io/github/codepunkt/should-not-update?branch=master)
Simple component utilizing the `shouldComponentUpdate` lifecycle hook. Wrap it around child components that you don't want to rerender on property changes.
```javascript
import ShouldNotUpdate from 'should-not-update'
const MyComponent = ({ someProp }) => (
This is not updating on property change
)
```
### Rendered component
By default, `ShouldNotUpdate` will render as a `div` element, but that can be changed by setting the `component` prop, which accepts either a tag name string (such as 'div' or 'span')
```javascript
```
or a React component type (a class or a function), which should render their children to be useful.
```javascript
const MyComponent = ({ children }) => (
{children}
)
```
### Exceptions to the rule
Sometimes you want child components to re-render under certain conditions. You can add these conditions by setting the `exceptWhen` prop.
```javascript
const MyComponent = ({ someProp }) => (
This only updates on property change when someProp is 42
)
```
### Other properties
All properties besides `children`, `component` and `exceptWhen` are directly passed to the rendered component.
```javascript
const MyComponent = ({ someProp }) => (
This is not updating on property change
)
```
### Use cases
Amongst others, one possible use case is not re-rendering static children of a [react-motion](https://github.com/chenglou/react-motion) spring animation on every animation frame.
```javascript
import { Link } from 'react-router'
import { Motion, spring } from 'react-motion'
const OffCanvas = ({ isVisible }) => (
{style =>
}
);
```