Project status

Introduction

How it works

Install

npm install proxy-memoize

How it behaves

import{memoize}from'proxy-memoize';constfn=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

Usage with React Context

constComponent=(props)=>{const[state,dispatch]=useContext(MyContext);constrender=useCallback(memoize(([props,state])=>(<div>{/* render with props and state */}</div>)),[dispatch]);returnrender([props,state]);};constApp=({ children})=>(<MyContext.Providervalue={useReducer(reducer,initialState)}>{children}</MyContext.Provider>);

Usage with React Redux & Reselect

import{useSelector}from'react-redux';constgetScore=memoize(state=>({score:heavyComputation(state.a+state.b),createdAt:Date.now(),}));constComponent=({ id})=>{const{ score, title}=useSelector(useCallback(memoize(state=>({score:getScore(state),title:state.titles[id],})),[id]));return<div>{score.score}{score.createdAt}{title}</div>;};

Usingsize option

import{useSelector}from'react-redux';constgetScore=memoize(state=>({score:heavyComputation(state.a+state.b),createdAt:Date.now(),}));constselector=memoize(([state,id])=>({score:getScore(state),title:state.titles[id],}),{size:500,});constComponent=({ id})=>{const{ score, title}=useSelector(state=>selector([state,id]));return<div>{score.score}{score.createdAt}{title}</div>;};

Usage with Zustand

import{create}from'zustand';constuseStore=create(set=>({  valueA,  valueB,// ...}));constgetDerivedValueA=memoize(state=>heavyComputation(state.valueA))constgetDerivedValueB=memoize(state=>heavyComputation(state.valueB))constgetTotal=state=>getDerivedValueA(state)+getDerivedValueB(state)constComponent=()=>{consttotal=useStore(getTotal)return<div>{total}</div>;};

Usage with immer

import{setAutoFreeze}from'immer';setAutoFreeze(false);

API

getUntracked

Examples

import{memoize,getUntracked}from'proxy-memoize';constfn=memoize(obj=>{console.log(getUntracked(obj));return{sum:obj.a+obj.b,diff:obj.a-obj.b};});

replaceNewProxy

memoize

Parameters

Examples

import{memoize}from'proxy-memoize';constfn=memoize(obj=>({sum:obj.a+obj.b,diff:obj.a-obj.b}));

memoizeWithArgs

Parameters

Examples

import{memoizeWithArgs}from'proxy-memoize';constfn=memoizeWithArgs((a,b)=>({sum:a.v+b.v,diff:a.v-b.v}));

Limitations and workarounds

Inside the function, objects are wrapped with proxies and touching a property will record it.

constfn=memoize(obj=>{console.log(obj.c);// this will mark ".c" as usedreturn{sum:obj.a+obj.b,diff:obj.a-obj.b};});

constfn=memoize(obj=>{console.log(getUntracked(obj).c);return{sum:obj.a+obj.b,diff:obj.a-obj.b};});

Memoized function will unwrap proxies in the return value only if it consists of plain objects/arrays.

constfn=memoize(obj=>{return{x:obj.a,y:{z:[obj.b,obj.c]}};// plain objects});

constfn=memoize(obj=>{return{x:newSet([obj.a]),y:newMap([['z',obj.b]])};// not plain});

Input object must not be mutated

constfn=memoize(obj=>{return{sum:obj.a+obj.b,diff:obj.a-obj.b};});conststate={a:1,b:2};constresult1=fn(state);state.a+=1;// Don't do this, the state object must be immutableconstresult2=fn(state);// Ends up unexpected result

Input can just be one object

constfn=memoize(obj=>{return{sum:obj.a+obj.b,diff:obj.a-obj.b};});

constfn=memoize((arg1,arg2)=>{// arg2 can't be used// ...});

Comparison

Reselect

// reselect// selecting values from the state object requires composing multiple functionsconstmySelector=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 functionconstmySelector=memoize(state=>state.values.value1+state.values.value2,);

conststate={todos:[{text:'foo',completed:false}]};// reselect// If the .completed property changes inside the state, the selector must be recalculated// even though 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.resultEqualityCheckcreateSelector(state=>state.todos,todos=>todos.map(todo=>todo.text));// ----------------------------------------------------------------------// proxy-memozie// If the .completed property changes inside state, the selector does NOT change// because we track only the accessed property (todos.text) and can ignore// the unrelated changeconsttodoTextsSelector=memoize(state=>state.todos.map(todo=>todo.text));

Related projects