# react-immutable-pure-component

> React PureComponent implementation embracing Immutable.js

Latest version **2.2.2** (published 2019-11-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-immutable-pure-component
pnpm add react-immutable-pure-component
yarn add react-immutable-pure-component
bun add react-immutable-pure-component
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.2 |
| Published | 2019-11-06 |
| First published | 2017-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | Piotr Tomasz Monarski |
| Maintainers | mastermonar |
| Keywords | react, memo, immutable, pure, component, PureComponent |

## Links

- npm: https://www.npmjs.com/package/react-immutable-pure-component
- Repository: https://github.com/Monar/react-immutable-pure-component
- Homepage: https://github.com/Monar/react-immutable-pure-component#readme
- Issues: https://github.com/Monar/react-immutable-pure-component/issues
- npm.io page: https://npm.io/package/react-immutable-pure-component

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.2.2 (latest) — 2019-11-06
- 2.2.0-rc.4 (next) — 2019-02-18
- 1.2.4 — 2020-12-13
- 2.2.1 — 2019-02-19
- 2.2.0 — 2019-02-19
- 2.2.0-rc.3 — 2019-02-17
- 2.2.0-rc.2 — 2019-01-31
- 2.2.0-rc.1 — 2019-01-31
- 2.2.0-rc.0 — 2019-01-30
- 2.1.0 — 2019-01-01
- 2.0.1 — 2018-12-31
- 1.2.3 — 2018-08-03
- 1.2.2 — 2018-06-27
- 2.0.0 — 2018-06-26
- 1.2.1 — 2018-06-26
- … 11 more at https://npm.io/package/react-immutable-pure-component/versions

## README

[![npm version](https://badge.fury.io/js/react-immutable-pure-component.svg)](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<T> = Array<$Keys<T> | any[]>;

export class ImmutablePureComponent<
  Props,
  State = void,
> extends React$Component<Props, State> {

  updateOnProps: UpdateOn<Props>;
  updateOnStates: UpdateOn<State>;
}

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<Props>(
  component: React$ComponentType<Props>,
  updateOnProps?: UpdateOn<Props>,
): React$ComponentType<Props>;
```

### 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(<Example data={data} onChange={() => {}}, 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).

---
_Source: https://npm.io/package/react-immutable-pure-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._