{"id":15207088,"url":"https://github.com/charlesstover/react-object-prop","last_synced_at":"2025-10-02T23:35:46.347Z","repository":{"id":57341997,"uuid":"140749664","full_name":"CharlesStover/react-object-prop","owner":"CharlesStover","description":"Caches Object props in React so as to prevent unnecessary re-rendering.","archived":true,"fork":false,"pushed_at":"2020-03-13T22:15:23.000Z","size":432,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-16T08:16:12.651Z","etag":null,"topics":["babel","babeljs","cache","caching","es6","javascript","js","memoization","memoize","mocha","npm","npm-module","npm-package","react","reactjs","travis","travis-ci","travisci","webpack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-object-prop","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/CharlesStover.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":"2018-07-12T18:18:18.000Z","updated_at":"2024-02-26T08:23:29.000Z","dependencies_parsed_at":"2022-09-13T02:21:58.754Z","dependency_job_id":null,"html_url":"https://github.com/CharlesStover/react-object-prop","commit_stats":null,"previous_names":["quisido/react-object-prop","charlesstover/react-object-prop"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesStover%2Freact-object-prop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesStover%2Freact-object-prop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesStover%2Freact-object-prop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesStover%2Freact-object-prop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CharlesStover","download_url":"https://codeload.github.com/CharlesStover/react-object-prop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235051566,"owners_count":18928185,"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":["babel","babeljs","cache","caching","es6","javascript","js","memoization","memoize","mocha","npm","npm-module","npm-package","react","reactjs","travis","travis-ci","travisci","webpack"],"created_at":"2024-09-28T06:21:44.902Z","updated_at":"2025-10-02T23:35:41.036Z","avatar_url":"https://github.com/CharlesStover.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Object Prop [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Easily%20improve%20React%20performance%20by%20caching%20your%20object%20props%20with%20the%20react-object-prop%20package!\u0026url=https://github.com/CharlesStover/react-object-prop\u0026via=CharlesStover\u0026hashtags=react,reactjs,javascript,webdev,webdeveloper,webdevelopment)\n\nCaches (memoizes) Object props in React so as to prevent unnecessary re-rendering.\n\n[![version](https://img.shields.io/npm/v/react-object-prop.svg)](https://www.npmjs.com/package/react-object-prop)\n[![minified size](https://img.shields.io/bundlephobia/min/react-object-prop.svg)](https://www.npmjs.com/package/react-object-prop)\n[![minzipped size](https://img.shields.io/bundlephobia/minzip/react-object-prop.svg)](https://www.npmjs.com/package/react-object-prop)\n[![downloads](https://img.shields.io/npm/dt/react-object-prop.svg)](https://www.npmjs.com/package/react-object-prop)\n[![build](https://travis-ci.com/CharlesStover/react-object-prop.svg)](https://travis-ci.com/CharlesStover/react-object-prop)\n\n## Install\n\n* `npm install react-object-prop --save` or\n* `yarn add react-object-prop`\n\n## Test\n\n`npm test`\n\n## Use\n\nImport the creator function from the package. Create a caching function _for each prop you want cached_.\n\nPass the object you want cached to the caching function, instead of as a prop, then pass the result of the caching function as a prop.\n\nIf the object did not change since the last time it was passed to the caching function, a cache of the last object will be passed instead, preventing an unnecessary re-render.\n\n## Example\n\nIn this minimal example, the objects passed to the `value` exhibit varying stages of cache.\n\nEvery time MyComponent renders:\n\n* The first Child component will re-render, because a new object reference will be generated for its `value` prop.\n* The second Child component will _not_ re-render, because the caching function will return its last used reference.\n* The third Child component will re-render, because the caching function will return a new reference due to the fact that the object has changed.\n\n```JS\nimport createObjectProp from 'react-object-prop';\nconst myProp = createObjectProp();\nconst myOtherProp = createObjectProp();\n\nlet CHANGING_VALUE = 1;\n\nclass MyComponent extends React.PureComponent {\n  render() {\n    CHANGING_VALUE++;\n    return (\n      \u003cdiv\u003e\n\n        {/* always re-renders */}\n        \u003cChild value={{ x: 1, y: 2 }} /\u003e\n\n        {/* never re-renders */}\n        \u003cChild value={myProp({ x: 3, y: 4 })} /\u003e\n\n        {/* always re-renders */}\n        \u003cChild value={myOtherProp({ x: 5, y: CHANGING_VALUE })} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n## Real-World Example\n\nIn this real-world example that inspired this package, the class names being passed to the Material UI components need to be cached. If the class names do not change, the Material UI components do not need to re-render.\n\n```JS\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport React from 'react';\nimport createObjectProp from 'react-object-prop';\nimport headerStyles from './header-styles';\n\nclass Header extends React.PureComponent {\n\n  constructor(props) {\n    super(props);\n    this.tabClasses = createObjectProp();\n    this.tabsClasses = createObjectProp();\n  }\n\n  render() {\n    return (\n      \u003cTabs\n        centered\n        classes={this.tabsClasses({\n          flexContainer: this.props.classes.tabsFlexContainer,\n          indicator: this.props.classes.indicator,\n          root: this.props.classes.tabs,\n          scroller: this.props.classes.scroller\n        })}\n        fullWidth\n        value={this.props.tab}\n      \u003e\n        \u003cTab\n          classes={this.tabClasses({\n            label: this.props.classes.label,\n            labelContainer: this.props.classes.labelContainer,\n            root: this.props.classes.tab,\n            selected: this.props.classes.selected,\n            wrapper: this.props.classes.tabWrapper\n          })}\n          disabled={this.props.tab === 'home'}\n          label=\"Home\"\n          tabIndex={1}\n          value=\"home\"\n        /\u003e\n        \u003cTab\n          classes={this.tabClasses}\n          disabled={this.props.tab === 'contact'}\n          label=\"Contact\"\n          tabIndex={2}\n          value=\"contact\"\n        /\u003e\n      \u003c/Tabs\u003e\n    );\n  }\n}\n\nexport default withStyles(headerStyles)(Header);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlesstover%2Freact-object-prop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharlesstover%2Freact-object-prop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlesstover%2Freact-object-prop/lists"}