memoize-one

What is memoize-one?

The memoize-one package is a simple and lightweight memoization library designed for memoizing the result of a function based on the latest arguments. It only remembers the latest arguments and result, and it will only recompute the result when the arguments change. This can be particularly useful for optimizing performance in scenarios where expensive function calls are frequently made with the same arguments.

What are memoize-one's main functionalities?

Simple memoization of functions

This feature allows you to create a memoized version of a function that caches the result based on the latest set of arguments it was called with. If the function is called again with the same arguments, the cached result is returned instead of recomputing.

const memoizeOne = require('memoize-one');
const add = (a, b) => a + b;
const memoizedAdd = memoizeOne(add);

console.log(memoizedAdd(1, 2)); // 3
console.log(memoizedAdd(1, 2)); // 3, cached result
console.log(memoizedAdd(2, 2)); // 4, recomputed because arguments changed

Custom equality function

This feature allows you to provide a custom function to compare the equality of arguments. This is useful when you need to memoize a function that takes complex arguments like objects or arrays and the default shallow comparison is not sufficient.

const memoizeOne = require('memoize-one');
const isEqual = (newArgs, lastArgs) => JSON.stringify(newArgs) === JSON.stringify(lastArgs);
const complexFunction = (obj) => {/* complex operation */};
const memoizedComplexFunction = memoizeOne(complexFunction, isEqual);

Other packages similar to memoize-one

lodash.memoize

Lodash provides a memoize function that can cache the result of function calls based on the arguments passed. It allows for custom cache implementations and is part of the larger Lodash utility library, which provides a wide range of functions for manipulating and traversing data.

fast-memoize

Fast-memoize is a high-performance memoization library that claims to be the fastest possible memoization library in JavaScript. It supports multiple argument memoization and provides various options for cache creation, argument serialization, and strategy selection.

reselect

Reselect is a selector library for Redux that uses memoization to efficiently compute derived data from the Redux store. It is specifically designed for use with Redux and allows for creating memoized selector functions that can compute derived data, optimizing performance for Redux applications.

README

memoize-one

A memoization library that only caches the result of the most recent arguments.

Rationale

Unlike other memoization libraries, memoize-one only remembers the latest arguments and result. No need to worry about cache busting mechanisms such as maxAge, maxSize, exclusions and so on which can be prone to memory leaks. memoize-one simply remembers the last arguments, and if the function is next called with the same arguments then it returns the previous result.

Usage

Standard usage

import memoizeOne from 'memoize-one';

const add = (a, b) => a + b;
const memoizedAdd = memoizeOne(add);

memoizedAdd(1, 2); // 3

memoizedAdd(1, 2); // 3
// Add function is not executed: previous result is returned

memoizedAdd(2, 3); // 5
// Add function is called to get new value

memoizedAdd(2, 3); // 5
// Add function is not executed: previous result is returned

memoizedAdd(1, 2); // 3
// Add function is called to get new value.
// While this was previously cached,
// it is not the latest so the cached result is lost

Installation

# yarn
yarn add memoize-one

# npm
npm install memoize-one --save

Module usage

ES6 module

import memoizeOne from 'memoize-one';

CommonJS

If you are in a CommonJS environment (eg Node), then you will need to add .default to your import:

const memoizeOne = require('memoize-one').default;

Custom equality function

You can also pass in a custom function for checking the equality of two sets of arguments

const memoized = memoizeOne(fn, isEqual);
type EqualityFn = (newArgs: mixed[], oldArgs: mixed[]) => boolean;

An equality function should return true if the arguments are equal. If true is returned then the wrapped function will not be called.

The default equality function is a shallow equal check of all arguments (each argument is compared with ===). If the length of arguments change, then the default equality function makes no shallow equality checks. You are welcome to decide if you want to return false if the length of the arguments is not equal

const simpleIsEqual: EqualityFn = (
  newArgs: mixed[],
  lastArgs: mixed[],
): boolean =>
  newArgs.length === lastArgs.length &&
  newArgs.every(
    (newArg: mixed, index: number): boolean =>
      shallowEqual(newArg, lastArgs[index]),
  );

A custom equality function needs to compare Arrays. The newArgs array will be a new reference every time so a simple newArgs === lastArgs will always return false.

Equality functions are not called if the this context of the function has changed (see below).

Here is an example that uses a lodash.isequal deep equal equality check

lodash.isequal correctly handles deep comparing two arrays

import memoizeOne from 'memoize-one';
import isDeepEqual from 'lodash.isequal';

const identity = x => x;

const shallowMemoized = memoizeOne(identity);
const deepMemoized = memoizeOne(identity, isDeepEqual);

const result1 = shallowMemoized({ foo: 'bar' });
const result2 = shallowMemoized({ foo: 'bar' });

result1 === result2; // false - difference reference

const result3 = deepMemoized({ foo: 'bar' });
const result4 = deepMemoized({ foo: 'bar' });

result3 === result4; // true - arguments are deep equal

this

memoize-one correctly respects this control

This library takes special care to maintain, and allow control over the the this context for both the original function being memoized as well as the returned memoized function. Both the original function and the memoized function's this context respect all the this controlling techniques:

• new bindings (new)
• explicit binding (call, apply, bind);
• implicit binding (call site: obj.foo());
• default binding (window or undefined in strict mode);
• fat arrow binding (binding to lexical this)
• ignored this (pass null as this to explicit binding)

Changes to this is considered an argument change

Changes to the running context (this) of a function can result in the function returning a different value even though its arguments have stayed the same:

function getA() {
  return this.a;
}

const temp1 = {
  a: 20,
};
const temp2 = {
  a: 30,
};

getA.call(temp1); // 20
getA.call(temp2); // 30

Therefore, in order to prevent against unexpected results, memoize-one takes into account the current execution context (this) of the memoized function. If this is different to the previous invocation then it is considered a change in argument. further discussion.

Generally this will be of no impact if you are not explicity controlling the this context of functions you want to memoize with explicit binding or implicit binding. memoize-One will detect when you are manipulating this and will then consider the this context as an argument. If this changes, it will re-execute the original function even if the arguments have not changed.

When your result function throws

There is no caching when your result function throws

If your result function throws then the memoized function will also throw. The throw will not break the memoized functions existing argument cache. It means the memoized function will pretend like it was never called with arguments that made it throw.

const canThrow = (name: string) => {
  console.log('called');
  if (name === 'throw') {
    throw new Error(name);
  }
  return { name };
};

const memoized = memoizeOne(canThrow);

const value1 = memoized('Alex');
// console.log => 'called'
const value2 = memoized('Alex');
// result function not called

console.log(value1 === value2);
// console.log => true

try {
  memoized('throw');
  // console.log => 'called'
} catch (e) {
  firstError = e;
}

try {
  memoized('throw');
  // console.log => 'called'
  // the result function was called again even though it was called twice
  // with the 'throw' string
} catch (e) {
  secondError = e;
}

console.log(firstError !== secondError);

const value3 = memoized('Alex');
// result function not called as the original memoization cache has not been busted
console.log(value1 === value3);
// console.log => true

Performance :rocket:

Tiny

memoize-one is super lightweight at minified and gzipped. (1KB = 1,024 Bytes)

Extremely fast

memoize-one performs better or on par with than other popular memoization libraries for the purpose of remembering the latest invocation.

Results

• simple arguments
• complex arguments

The comparisons are not exhaustive and are primarily to show that memoize-one accomplishes remembering the latest invocation really fast. The benchmarks do not take into account the differences in feature sets, library sizes, parse time, and so on.

Code health :thumbsup:

• Tested with all built in JavaScript types.
• 100% code coverage
• Continuous integration to run tests and type checks.
• Flow types for safer internal execution and external consumption. Also allows for editor autocompletion.
• Follows Semantic versioning (2.0) for safer consumption.
• No dependencies