{"id":18966997,"url":"https://github.com/monar/react-immutable-pure-component","last_synced_at":"2025-08-20T22:30:48.115Z","repository":{"id":55845074,"uuid":"79389208","full_name":"Monar/react-immutable-pure-component","owner":"Monar","description":"Unfortunately React.PureComponent is not embracing Immutable.js to it full potential. So here is my solution to this problem.","archived":false,"fork":false,"pushed_at":"2020-12-13T11:46:49.000Z","size":2102,"stargazers_count":32,"open_issues_count":12,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-18T08:45:48.434Z","etag":null,"topics":["immutable","purecomponent","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Monar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-18T22:02:11.000Z","updated_at":"2023-02-10T07:38:37.000Z","dependencies_parsed_at":"2022-08-15T07:50:35.108Z","dependency_job_id":null,"html_url":"https://github.com/Monar/react-immutable-pure-component","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monar%2Freact-immutable-pure-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monar%2Freact-immutable-pure-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monar%2Freact-immutable-pure-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monar%2Freact-immutable-pure-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Monar","download_url":"https://codeload.github.com/Monar/react-immutable-pure-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230462906,"owners_count":18229864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["immutable","purecomponent","react"],"created_at":"2024-11-08T14:39:18.526Z","updated_at":"2024-12-19T16:10:34.093Z","avatar_url":"https://github.com/Monar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/react-immutable-pure-component.svg)](https://badge.fury.io/js/react-immutable-pure-component)\n\n# ImmutablePureComponent\n\nUnfortunately `React.PureComponent` is not embracing `Immutable.js` to it full\npotential. While `Immutable.js` provides [hash value](https://facebook.github.io/immutable-js/docs/#/ValueObject/hashCode),\nwitch allows for fast comparison of two different instances\n`React.PureComonent` is only comparing addresses of those instances.\n\nThe `ImmutablePureComponent` uses [is](https://facebook.github.io/immutable-js/docs/#/is) to compare values and\nextends component functionality by introducing:\n* `updateOnProps`\n* `updateOnStates`\n\nWith those properties you can specify list of props or states that will be\nchecked for changes. If value is `undefined` (default) then all `props` and\n`state` will be checked, otherwise array of keys or paths is expected. The path\nis an `Array` of keys like in the example below. Path values are working for\nany mix of supported collection as long as given key exists, otherwise checked\nvalue is `undefined`. `Immutable.Collection`, plain Objects, Arrays, es6 Map\nand any collection providing `get` and `has` functionality are all supported.\n\n```\ntype UpdateOn\u003cT\u003e = Array\u003c$Keys\u003cT\u003e | any[]\u003e;\n\nexport class ImmutablePureComponent\u003c\n  Props,\n  State = void,\n\u003e extends React$Component\u003cProps, State\u003e {\n\n  updateOnProps: UpdateOn\u003cProps\u003e;\n  updateOnStates: UpdateOn\u003cState\u003e;\n}\n\nexport default ImmutablePureComponent;\n```\n\n# immutableMemo\n\nWith React `16.6.0` we ware introduced to `React.memo` a `React.PureComponent`\nequivalent for functional components. And the same story goes here,\nunfortunately `React.memo` is not fully embracing `Immutable` potential. That\nis where `immutableMemo` steps in. This is wrapper over `React.memo` with\ncustom comparison function. `immutableMemo` accepts component as first argument\nand optionally array of property keys or paths the same way as `updateOnProps`\nis working for `ImmutablePureComponent`.\n\n```\nexport function immutableMemo\u003cProps\u003e(\n  component: React$ComponentType\u003cProps\u003e,\n  updateOnProps?: UpdateOn\u003cProps\u003e,\n): React$ComponentType\u003cProps\u003e;\n```\n\n### Example\nIn this example component will update when value of `me` is change and will\nignore changes of `data`, `check` or any other property. Component will also\nupdate on change of first element of `buzz` or change to `type` and will ignore\nchanges to the rest of the state. \n\n```js\nclass Example extends ImmutablePureComponent {\n  state = {\n    fis: { \n      buzz: Immutable.List([10, 11])\n      ignore: 'this',\n    },\n    type: undefined,\n  };\n\n  updateOnStates = [\n    ['fis', 'buzz', 0],\n    'type',\n  ];\n\n  updateOnProps = [\n    ['data', 'check', 'me'],\n  ];\n\n  render() {...}\n}\n\nlet data = Immutable.Map({ check: new Map([['me', true]]) }) \n\nReactDOM.render(\u003cExample data={data} onChange={() =\u003e {}}, root);\n```\n\nTo check what its all about checkout the interactive example :D\n### [Interactive example](https://codesandbox.io/s/github/Monar/react-immutable-pure-component/tree/master/example).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonar%2Freact-immutable-pure-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonar%2Freact-immutable-pure-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonar%2Freact-immutable-pure-component/lists"}