useMemo.js

const globalCache = {
  isGenerated: false,
  currentIndex: 0,
  dependencies: [],
  results: [],
};

function useMemo(callback, deps) {
  let cachedDependencies, cachedResult;

  if (globalCache.isGenerated) {
    cachedDependencies = globalCache.dependencies[globalCache.currentIndex];
    cachedResult = globalCache.results[globalCache.currentIndex];
    globalCache.currentIndex++;
  }

  function areDependenciesEqual(deps1, deps2) {
    // return deps1 === deps2; // this might change
    return JSON.stringify(deps1) === JSON.stringify(deps2);
  }

  const shouldRecalculate =
    deps === undefined || !areDependenciesEqual(deps, cachedDependencies);

  if (shouldRecalculate) {
    if ((__DEBUG__ = true)) {
      console.log('recalculate');
    }
    cachedDependencies = deps;
    cachedResult = callback();
  }

  if (!globalCache.isGenerated) {
    // only run on initial mounted
    globalCache.dependencies.push(cachedDependencies);
    globalCache.results.push(cachedResult);
  }

  return cachedResult;
}

function ShopeeButton() {
  const state1 = 5;
  const state2 = 10;

  const add10 = useMemo(() => {
    return state1 + 10;
  }, [state1]); // cacheDeps[0]

  const add20 = useMemo(() => {
    return state2 + 20;
  }, [state2]); // cacheDeps[1]

  const add30 = useMemo(() => {
    return state2 + 30;
  }, [add20]); // cacheDeps[1]

  return [add10, add20, add30];
}

function ShopeeButton2() {
  const state1 = 6;
  const state2 = 13;

  const add10 = useMemo(() => {
    return state1 + 10;
  }, [state1]); // cacheDeps[0]

  const add45 = useMemo(() => {
    return state2 + 45;
  }, [state2]); // cacheDeps[1]

  const add12 = useMemo(() => {
    return state2 + 12;
  }, [state2]); // cacheDeps[1]

  return [add10, add45, add12];
}

const withCaching = (Component) =>
  new Proxy(Component, {
    apply: function (target, thisArg, argArray) {
      globalCache.currentIndex = 0;
      const toReturn = Reflect.apply(target, thisArg, argArray);
      globalCache.isGenerated = true;
      return toReturn;
    },
  });

const CachingShopeeButton = withCaching(ShopeeButton);
const CachingShopeeButton2 = withCaching(ShopeeButton2);

console.log(CachingShopeeButton());
console.log(CachingShopeeButton());
console.log(CachingShopeeButton());
console.log(CachingShopeeButton());
console.log(CachingShopeeButton2());
console.log(CachingShopeeButton());
console.log(CachingShopeeButton2());
console.log(CachingShopeeButton2());