https://github.com/monar/react-immutable-pure-component
Unfortunately React.PureComponent is not embracing Immutable.js to it full potential. So here is my solution to this problem.
https://github.com/monar/react-immutable-pure-component
immutable purecomponent react
Last synced: 11 months ago
JSON representation
Unfortunately React.PureComponent is not embracing Immutable.js to it full potential. So here is my solution to this problem.
- Host: GitHub
- URL: https://github.com/monar/react-immutable-pure-component
- Owner: Monar
- License: mit
- Created: 2017-01-18T22:02:11.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-12-13T11:46:49.000Z (over 5 years ago)
- Last Synced: 2024-12-18T08:45:48.434Z (over 1 year ago)
- Topics: immutable, purecomponent, react
- Language: JavaScript
- Homepage:
- Size: 2 MB
- Stars: 32
- Watchers: 2
- Forks: 2
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/react-immutable-pure-component)
# ImmutablePureComponent
Unfortunately `React.PureComponent` is not embracing `Immutable.js` to it full
potential. While `Immutable.js` provides [hash value](https://facebook.github.io/immutable-js/docs/#/ValueObject/hashCode),
witch allows for fast comparison of two different instances
`React.PureComonent` is only comparing addresses of those instances.
The `ImmutablePureComponent` uses [is](https://facebook.github.io/immutable-js/docs/#/is) to compare values and
extends component functionality by introducing:
* `updateOnProps`
* `updateOnStates`
With those properties you can specify list of props or states that will be
checked for changes. If value is `undefined` (default) then all `props` and
`state` will be checked, otherwise array of keys or paths is expected. The path
is an `Array` of keys like in the example below. Path values are working for
any mix of supported collection as long as given key exists, otherwise checked
value is `undefined`. `Immutable.Collection`, plain Objects, Arrays, es6 Map
and any collection providing `get` and `has` functionality are all supported.
```
type UpdateOn = Array<$Keys | any[]>;
export class ImmutablePureComponent<
Props,
State = void,
> extends React$Component {
updateOnProps: UpdateOn;
updateOnStates: UpdateOn;
}
export default ImmutablePureComponent;
```
# immutableMemo
With React `16.6.0` we ware introduced to `React.memo` a `React.PureComponent`
equivalent for functional components. And the same story goes here,
unfortunately `React.memo` is not fully embracing `Immutable` potential. That
is where `immutableMemo` steps in. This is wrapper over `React.memo` with
custom comparison function. `immutableMemo` accepts component as first argument
and optionally array of property keys or paths the same way as `updateOnProps`
is working for `ImmutablePureComponent`.
```
export function immutableMemo(
component: React$ComponentType,
updateOnProps?: UpdateOn,
): React$ComponentType;
```
### Example
In this example component will update when value of `me` is change and will
ignore changes of `data`, `check` or any other property. Component will also
update on change of first element of `buzz` or change to `type` and will ignore
changes to the rest of the state.
```js
class Example extends ImmutablePureComponent {
state = {
fis: {
buzz: Immutable.List([10, 11])
ignore: 'this',
},
type: undefined,
};
updateOnStates = [
['fis', 'buzz', 0],
'type',
];
updateOnProps = [
['data', 'check', 'me'],
];
render() {...}
}
let data = Immutable.Map({ check: new Map([['me', true]]) })
ReactDOM.render( {}}, root);
```
To check what its all about checkout the interactive example :D
### [Interactive example](https://codesandbox.io/s/github/Monar/react-immutable-pure-component/tree/master/example).