proxy-memoize
Advanced tools
The proxy-memoize package is a utility for creating memoized functions that use JavaScript Proxy objects to efficiently cache and retrieve computed values based on input arguments. It is particularly useful for optimizing performance in applications where functions are called frequently with the same inputs.
Basic Memoization
This feature allows you to memoize a simple function, such as an addition function. The memoized function caches the result of the function call with specific arguments, so subsequent calls with the same arguments return the cached result, improving performance.
const memoize = require('proxy-memoize');
const add = (a, b) => a + b;
const memoizedAdd = memoize(add);
console.log(memoizedAdd(1, 2)); // 3
console.log(memoizedAdd(1, 2)); // 3, retrieved from cacheDeep Object Memoization
This feature demonstrates the ability to memoize functions that access deeply nested properties within objects. The proxy-memoize package efficiently tracks access to nested properties and caches results based on those accesses.
const memoize = require('proxy-memoize');
const getNestedValue = (obj) => obj.deep.nested.value;
const memoizedGetNestedValue = memoize(getNestedValue);
const obj = { deep: { nested: { value: 42 } } };
console.log(memoizedGetNestedValue(obj)); // 42
console.log(memoizedGetNestedValue(obj)); // 42, retrieved from cacheMemoizee is a highly configurable memoization library that supports various caching strategies, including LRU cache. It is more feature-rich compared to proxy-memoize, offering options like cache expiration and prefetching, but it may not be as lightweight or straightforward for simple use cases.
Lodash.memoize is a part of the Lodash library, providing a simple memoization function. It is similar to proxy-memoize in terms of basic functionality but lacks the deep object tracking capabilities of proxy-memoize. Lodash.memoize is a good choice if you are already using Lodash in your project.
Fast-memoize is a performance-focused memoization library that aims to be one of the fastest memoization libraries available. It is similar to proxy-memoize in terms of speed but does not offer the same level of deep object tracking and proxy-based caching.
Intuitive magical memoization library with Proxy and WeakMap
The feature has been pretty stable in v1. In v2, we added some new capabilities. Our docs and examples are not very comprehensive, and we hope to have more best practices. Contributions are welcome.
Immutability is pivotal in more than a few frameworks, like React and Redux. It enables simple-yet-efficient change detection in large nested data structures.
JavaScript is a mutable language by default. Libraries like immer simplify updating immutable data strucutres.
This library helps deriving data from immutable structures (AKA, selectors), efficiantly caching results for faster performance.
This library utilizes Proxy and WeakMap, and provides memoization. The memoized function will re-evaluate the original function only if the used part of argument (object) is changed. It's intuitive in a sense and magical in another sense.
When it (re-)evaluates a function, it will wrap an input object with proxies (recursively, on demand) and invoke the function. When it's finished it will check what is "affected". The "affected" is a list of paths of the input object that are accessed during the function invocation.
Next time when it receives a new input object, it will check if values in "affected" paths are changed. If so, it will re-evaluate the function. Otherwise, it will return a cached result.
The cache size is 1 by default, but configurable.
We have 2-tier cache mechanism. What is described so far is the second tier cache.
The first tier cache is with WeakMap. It's a WeakMap of the input object and the result of function invocation. There's no notion of cache size.
In summary, there are two types of cache:
npm install proxy-memoize
import { memoize } from 'proxy-memoize';
const fn = memoize(x => ({ sum: x.a + x.b, diff: x.a - x.b }));
fn({ a: 2, b: 1, c: 1 }); // ---> { sum: 3, diff: 1 }
fn({ a: 3, b: 1, c: 1 }); // ---> { sum: 4, diff: 2 }
fn({ a: 3, b: 1, c: 9 }); // ---> { sum: 4, diff: 2 } (returning a cached value)
fn({ a: 4, b: 1, c: 9 }); // ---> { sum: 5, diff: 3 }
fn({ a: 1, b: 2 }) === fn({ a: 1, b: 2 }); // ---> true
Instead of bare useMemo.
const Component = (props) => {
const [state, dispatch] = useContext(MyContext);
const render = useCallback(memoize(([props, state]) => (
<div>
{/* render with props and state */}
</div>
)), [dispatch]);
return render([props, state]);
};
const App = ({ children }) => (
<MyContext.Provider value={useReducer(reducer, initialState)}>
{children}
</MyContext.Provider>
);
Instead of reselect.
import { useSelector } from 'react-redux';
const getScore = memoize(state => ({
score: heavyComputation(state.a + state.b),
createdAt: Date.now(),
}));
const Component = ({ id }) => {
const { score, title } = useSelector(useCallback(memoize(state => ({
score: getScore(state),
title: state.titles[id],
})), [id]));
return <div>{score.score} {score.createdAt} {title}</div>;
};
size optionThe example above might seem tricky to create memoized selector in component.
Alternatively, we can use size option.
import { useSelector } from 'react-redux';
const getScore = memoize(state => ({
score: heavyComputation(state.a + state.b),
createdAt: Date.now(),
}));
const selector = memoize(([state, id]) => ({
score: getScore(state),
title: state.titles[id],
}), {
size: 500,
});
const Component = ({ id }) => {
const { score, title } = useSelector(state => selector([state, id]));
return <div>{score.score} {score.createdAt} {title}</div>;
};
The drawback of this approach is we need a good estimate of size in advance.
For derived values.
import { create } from 'zustand';
const useStore = create(set => ({
valueA,
valueB,
// ...
}));
const getDerivedValueA = memoize(state => heavyComputation(state.valueA))
const getDerivedValueB = memoize(state => heavyComputation(state.valueB))
const getTotal = state => getDerivedValueA(state) + getDerivedValueB(state)
const Component = () => {
const total = useStore(getTotal)
return <div>{total}</div>;
};
Disabling auto freeze is recommended. JavaScript does not support nested proxies of frozen objects.
import { setAutoFreeze } from 'immer';
setAutoFreeze(false);
This is to unwrap a proxy object and return an original object. It returns null if not relevant.
[Notes] This function is for debugging purpose. It's not supposed to be used in production and it's subject to change.
import { memoize, getUntracked } from 'proxy-memoize';
const fn = memoize(obj => {
console.log(getUntracked(obj));
return { sum: obj.a + obj.b, diff: obj.a - obj.b };
});
This is to replace newProxy function in upstream library, proxy-compare. Use it at your own risk.
[Notes] See related discussoin: https://github.com/dai-shi/proxy-compare/issues/40
Create a memoized function
fn function (obj: Obj): Result
options {size: number?, noWeakMap: boolean?}?
options.size (default: 1)options.noWeakMap disable tier-1 cache (default: false)import { memoize } from 'proxy-memoize';
const fn = memoize(obj => ({ sum: obj.a + obj.b, diff: obj.a - obj.b }));
Returns function (obj: Obj): Result
Create a memoized function with args
fnWithArgs function (...args: Args): Result
options Options?
options.size (default: 1)import { memoizeWithArgs } from 'proxy-memoize';
const fn = memoizeWithArgs((a, b) => ({ sum: a.v + b.v, diff: a.v - b.v }));
const fn = memoize(obj => {
console.log(obj.c); // this will mark ".c" as used
return { sum: obj.a + obj.b, diff: obj.a - obj.b };
});
A workaround is to unwrap a proxy.
const fn = memoize(obj => {
console.log(getUntracked(obj).c);
return { sum: obj.a + obj.b, diff: obj.a - obj.b };
});
const fn = memoize(obj => {
return { x: obj.a, y: { z: [obj.b, obj.c] } }; // plain objects
});
In this case above, the return value is clean, however, see the following.
const fn = memoize(obj => {
return { x: new Set([obj.a]), y: new Map([['z', obj.b]]) }; // not plain
});
We can't unwrap Set/Map or other non-plain objects.
The problem is when obj.a is an object (which will be wrapped with a proxy)
and touching its property will record the usage, which leads
unexpected behavior.
If obj.a is a primitive value, there's no problem.
There's no workaround. Please be advised to use only plain objects/arrays. Nested objects/arrays are OK.
const fn = memoize(obj => {
return { sum: obj.a + obj.b, diff: obj.a - obj.b };
});
const state = { a: 1, b: 2 };
const result1 = fn(state);
state.a += 1; // Don't do this, the state object must be immutable
const result2 = fn(state); // Ends up unexpected result
The input obj or the state must be immutable.
The whole concept is built around the immutability.
It's faily common in Redux and React,
but be careful if you are not familiar with the concept.
There's no workaround.
const fn = memoize(obj => {
return { sum: obj.a + obj.b, diff: obj.a - obj.b };
});
The input obj is the only argument that a function can receive.
const fn = memoize((arg1, arg2) => {
// arg2 can't be used
// ...
});
A workaround is to use memoizeWithArgs util.
Note: this disables the tier-1 cache with WeakMap.
At a basic level, memoize can be substituted in for createSelector. Doing
so will return a selector function with proxy-memoize's built-in tracking
of your state object.
// reselect
// selecting values from the state object requires composing multiple functions
const mySelector = createSelector(
state => state.values.value1,
state => state.values.value2,
(value1, value2) => value1 + value2,
);
// ----------------------------------------------------------------------
// proxy-memoize
// the same selector can now be written as a single memoized function
const mySelector = memoize(
state => state.values.value1 + state.values.value2,
);
With complex state objects, the ability to track individual properties
within state means that proxy-memoize will only calculate a new
value if and only if the tracked property changes.
const state = {
todos: [{ text: 'foo', completed: false }]
};
// reselect
// If the .completed property changes inside state, the selector must be recalculated
// even through none of the properties we care about changed. In react-redux, this
// selector will result in additional UI re-renders or the developer to implement
// selectorOptions.memoizeOptions.resultEqualityCheck
createSelector(
state => state.todos,
todos => todos.map(todo => todo.text)
);
// ----------------------------------------------------------------------
// proxy-memozie
// If the .completed property changes inside state, the selector does NOT change
// this is because we track only the accessed property (todos.text) and can ignore
// the unrelated change
const todoTextsSelector = memoize(state => state.todos.map(todo => todo.text));
proxy-memoize depends on an internal library proxy-compare.
react-tracked and valtio are libraries that depend on the same library.
memoize-state provides a similar API for the same goal.
FAQs
Intuitive magical memoization library with Proxy and WeakMap
We found that proxy-memoize demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Research
Security News
Malicious Go packages are impersonating popular libraries to install hidden loader malware on Linux and macOS, targeting developers with obfuscated payloads.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.