npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-lazy-cache

v3.0.1

Published

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

Downloads

69,765

Readme

#react-lazy-cache

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

react-lazy-cache is a utility to lazily calculate and cache values in a React component based on props.

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: {
        params: ['a', 'b'],
        fn: (a, b) => a + b
      },
      difference: {
        params: ['a', 'b'],
        fn: (a, b) => a - b
      },
      product: {
        params: ['a', 'b'],
        fn: (a, b) => a * b
      },
      quotient: {
        params: ['a', 'b'],
        fn: (a, b) => a / b
      },
      sumSquared: {
        params: ['sum'],
        fn: (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>);
  }
}

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.

Selecting Parameters

When you specify your functions to calculate each value, you must specify the params, which refer either to props given to your React component, or to other calculated values (see: sumSquared).

Be careful to not cause an infinite dependency loop!

Internet Explorer 8 support

As this library utilizes Getters, which are not shimmable in IE8 and older, an alternate noGetters module is exposed. This version allows you to cache values, but are not able to inject other values such as sumSquared. Usage:

import LazyCache from 'react-lazy-cache/noGetters';

const cache = new LazyCache(...) // same signature as normal version

const sum = cache.get('sum');

The difference is that it's a class and not a plain function (so you have to new it), and properties are accessed through the get-function, instead of as a property.

Conclusion

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

Feedback welcome.