https://github.com/charlesstover/react-object-prop
Caches Object props in React so as to prevent unnecessary re-rendering.
https://github.com/charlesstover/react-object-prop
babel babeljs cache caching es6 javascript js memoization memoize mocha npm npm-module npm-package react reactjs travis travis-ci travisci webpack
Last synced: 4 months ago
JSON representation
Caches Object props in React so as to prevent unnecessary re-rendering.
- Host: GitHub
- URL: https://github.com/charlesstover/react-object-prop
- Owner: CharlesStover
- License: mit
- Archived: true
- Created: 2018-07-12T18:18:18.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-03-13T22:15:23.000Z (about 5 years ago)
- Last Synced: 2024-12-16T08:16:12.651Z (6 months ago)
- Topics: babel, babeljs, cache, caching, es6, javascript, js, memoization, memoize, mocha, npm, npm-module, npm-package, react, reactjs, travis, travis-ci, travisci, webpack
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-object-prop
- Size: 422 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Object Prop [](https://twitter.com/intent/tweet?text=Easily%20improve%20React%20performance%20by%20caching%20your%20object%20props%20with%20the%20react-object-prop%20package!&url=https://github.com/CharlesStover/react-object-prop&via=CharlesStover&hashtags=react,reactjs,javascript,webdev,webdeveloper,webdevelopment)
Caches (memoizes) Object props in React so as to prevent unnecessary re-rendering.
[](https://www.npmjs.com/package/react-object-prop)
[](https://www.npmjs.com/package/react-object-prop)
[](https://www.npmjs.com/package/react-object-prop)
[](https://www.npmjs.com/package/react-object-prop)
[](https://travis-ci.com/CharlesStover/react-object-prop)
## Install
* `npm install react-object-prop --save` or
* `yarn add react-object-prop`
## Test
`npm test`
## Use
Import the creator function from the package. Create a caching function _for each prop you want cached_.
Pass 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.
If 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.
## Example
In this minimal example, the objects passed to the `value` exhibit varying stages of cache.
Every time MyComponent renders:
* The first Child component will re-render, because a new object reference will be generated for its `value` prop.
* The second Child component will _not_ re-render, because the caching function will return its last used reference.
* 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.
```JS
import createObjectProp from 'react-object-prop';
const myProp = createObjectProp();
const myOtherProp = createObjectProp();
let CHANGING_VALUE = 1;
class MyComponent extends React.PureComponent {
render() {
CHANGING_VALUE++;
return (
{/* always re-renders */}
{/* never re-renders */}
{/* always re-renders */}
);
}
}
```
## Real-World Example
In 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.
```JS
import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import React from 'react';
import createObjectProp from 'react-object-prop';
import headerStyles from './header-styles';
class Header extends React.PureComponent {
constructor(props) {
super(props);
this.tabClasses = createObjectProp();
this.tabsClasses = createObjectProp();
}
render() {
return (
);
}
}
export default withStyles(headerStyles)(Header);
```