Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
react-lazy-cache
Advanced tools
A utility to lazily calculate and cache values in a react component based on props
#react-lazy-cache
[](https://www.npmjs .com/package/react-lazy-cache)
react-lazy-cache
is a utility to memoize values calculated from props to a React component.
npm install --save react-lazy-cache
Ideally, in a React component, you would calculate values that depend on your props inputs every time the component
is rendered. However, in practice, sometimes these values, either for computational or memory reasons, are better off
cached. When you cache them, however, you need to be constantly watching your props to know if you need to
invalidate your cache and recalculate those values. That is what react-lazy-cache
does for you.
react-lazy-cache
could not be simpler to use. You simply need to give it a map of calculations, and let it know
when your component will receive new props.
import React, {Component, PropTypes} from 'react';
import lazyCache from 'react-lazy-cache';
export default class Arithmetic extends Component {
static propTypes = {
a: PropTypes.number.isRequired,
b: PropTypes.number.isRequired
}
componentWillMount() {
// create cache
this.cache = lazyCache(this, {
sum: (a, b) => a + b,
difference: (a, b) => a - b,
product: (a, b) => a * b,
quotient: (a, b) => a / b,
sumSquared: (sum) => sum * sum
});
}
componentWillReceiveProps(nextProps) {
this.cache.componentWillReceiveProps(nextProps);
}
render() {
const {sum, difference, product, quotient, sumSquared} = this.cache;
return (<div>
<div>Sum: {sum}</div>
<div>Difference: {difference}</div>
<div>Product: {product}</div>
<div>Quotient: {quotient}</div>
<div>Sum Squared: {sumSquared}</div>
</div>);
</div>);
}
}
Two things to notice about the above example:
The values do not get calculated until the properties on the cache
object get referenced in render().
That's why it's "lazy". They will not be calculated again unless one of the props that the calculation depends on
changes.
"But how does it know which prop to use??", you ask? react-lazy-cache
detects the names of the props by the
parameter names to the calculation functions.
You can even inject other calculated values, such as in the case of sumSquared
. Be careful to not cause an
infinite dependency loop!
That's all you need to know! Go forth and intelligently cache your calculated values!
FAQs
A utility to lazily calculate and cache values in a react component based on props
The npm package react-lazy-cache receives a total of 14,162 weekly downloads. As such, react-lazy-cache popularity was classified as popular.
We found that react-lazy-cache demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.