Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-lazy-cache

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-lazy-cache

A utility to lazily calculate and cache values in a react component based on props

  • 2.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7.3K
decreased by-58.93%
Maintainers
1
Weekly downloads
 
Created
Source

#react-lazy-cache

[NPM Version](https://www.npmjs .com/package/react-lazy-cache) NPM Downloads Build Status

react-lazy-cache is a utility to memoize values calculated from props to a React component.

Installation

npm install --save react-lazy-cache

Why?

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.

Usage

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
    });
  }
  
  componentWillReceiveProps(nextProps) {
    this.cache.componentWillReceiveProps(nextProps);
  }
  
  render() {
    const {sum, difference, product, quotient} = this.cache;
    return (<div>
      <div>Sum: {sum}</div>
      <div>Difference: {difference}</div>
      <div>Product: {product}</div>
      <div>Quotient: {quotient}</div>
    </div>);
  }
}

Two things to notice about the above example:

Lazy

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.

Parameter Injection

"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.

Conclusion

That's all you need to know! Go forth and intelligently cache your calculated values!

Keywords

FAQs

Package last updated on 13 Oct 2015

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc