JavaScript 関数をキャッシュする(Reactとかで使えるかも)

React でJSX内に、アロー関数式を書いたりしていると、毎度呼び出すときにレンダリングが走っちゃうんじゃないのかな、

ということを回避するための仕組みの試作です。

const _cashFuncMap = new Map();
const cashFunc = (func) => {
  const strFunc = func.toString();
  let result = _cashFuncMap.get(strFunc);
  if (result === undefined) {
    result = func;
    _cashFuncMap.set(strFunc, func)
  }
  return result;
};

const f1 = () => 'test';
console.log(f1());  // "test"
const f2 = cashFunc(f1);
console.log(f2());  // "test"
console.log(f1 === f2);  // true

const cf = cashFunc;
const f3 = cf( (a) => a + a )
console.log(f3('ABC'));  // "ABCABC"
const f4 = cf( (a) => a + a )
console.log(f4('DEF'));  // "DEFDEF"
console.log(f3 === f4);   // true

これで、文字列として変換した形が同じ関数なら、アロー関数式を動的に書いたとしてもcf(関数)の形式で書いておけば、キャッシュされた値によって同値が返るので再レンダリングされない、みたいな。

でも、Reactの再レンダリングの仕組みよりも、functionのtoStringしてMapで値を持ってくるほうが遅いんじゃないだろうか、みたいな。検証してないからしらんけど。

動的に関数式を生成しないけど、即時でかけるような専用の構文がほしい。あるいは、React側が再レンダリングしないように対応してくれるようにならないかと思ったり。

以上です。