react-lazy-cache

library3.0.1jsnpmunverified

react-lazy-cache is a utility for lazily calculating and caching values in React components based on props. It helps avoid expensive recalculations by only recomputing when dependent props or other cached values change. The current stable version is 3.0.1, with a low release cadence (last update several years ago). It supports both a getter-based API for modern browsers and a fallback noGetters module for IE8 compatibility. Unlike alternatives like useMemo or reselect, it provides an imperative, class-based caching mechanism tailored for React class components.

testing

npm install react-lazy-cache

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-LAZY-CACHE

react-lazy-cache

testingjavascriptv3.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

lazyCache

✓ import lazyCache from 'react-lazy-cache'

✗ const lazyCache = require('react-lazy-cache')

Default import; CommonJS require works but ESM is preferred.

LazyCache

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

✗ const LazyCache = require('react-lazy-cache/noGetters')

For IE8 support, use the noGetters module. It requires instantiation with new.

lazyCache (default)

✓ const lazyCache = require('react-lazy-cache')

✗ import { lazyCache } from 'react-lazy-cache'

Named import is incorrect; the package exports a default.

Creates a lazy cache with computations depending on props and other cached values.

import React, { Component, PropTypes } from 'react'; import lazyCache from 'react-lazy-cache'; class Arithmetic extends Component { static propTypes = { a: PropTypes.number.isRequired, b: PropTypes.number.isRequired }; componentWillMount() { this.cache = lazyCache(this, { sum: { params: ['a', 'b'], fn: (a, b) => a + b }, product: { params: ['a', 'b'], fn: (a, b) => a * b }, sumSquared: { params: ['sum'], fn: (sum) => sum * sum } }); } componentWillReceiveProps(nextProps) { this.cache.componentWillReceiveProps(nextProps); } render() { const { sum, product, sumSquared } = this.cache; return ( <div> <div>Sum: {sum}</div> <div>Product: {product}</div> <div>Sum Squared: {sumSquared}</div> </div> ); } }

Debug

Known issues

deprecatedComponent lifecycle methods componentWillMount and componentWillReceiveProps are deprecated in React 17+.

fix

Use constructor or getDerivedStateFromProps for initialization and getDerivedStateFromProps for prop updates.

affects: >=17.0.0

gotchaInfinite dependency loop if a calculation depends on itself (directly or indirectly).

fix

Ensure params do not form a cycle; avoid self-referential params.

affects: >=1.0.0

breakingnoGetters module uses a class instead of a function; must use new LazyCache() and .get() method.

fix

For IE8, import LazyCache from 'react-lazy-cache/noGetters' and instantiate with new.

affects: >=1.0.0

gotchaProperties on cache object are getters; reading them triggers computation. Does not work in IE8.

fix

Use noGetters module for IE8 compatibility.

affects: >=1.0.0

deprecatedPropTypes imported from 'react' is deprecated in React 15.5+.

fix

Use the 'prop-types' package: import PropTypes from 'prop-types';

affects: >=15.5.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'componentWillReceiveProps')

Cache not initialized in componentWillMount before calling componentWillReceiveProps.

fix

Initialize this.cache in the constructor or componentWillMount before receiving new props.

Uncaught RangeError: Maximum call stack size exceeded

Infinite dependency loop in params (e.g., a calculation depends on itself).

fix

Check params for cycles; ensure no calculation depends on itself directly or indirectly.

TypeError: Object doesn't support property or method 'defineGetter'

Using the default getter-based module in IE8.

fix

Use the noGetters module: import LazyCache from 'react-lazy-cache/noGetters' and use .get() method.

Upgrade

Version history

3.0.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for use in React components

Agent activity

8 hits · last 30 days

node

Resources

githubgit://github.com/erikras/react-lazy-cache ↗

packagereact-lazy-cache ↗

homepagehttps://github.com/erikras/react-lazy-cache ↗