Next.js 13 `cache` 임시 구현

React RFC 중 주목할 만한 use 훅을 정의하는 RFC가 생겼습니다. 아직 cache 함수는 RFC가 작성되어 있지 않지만, react@experimental을 받으시면 use와 cache 모두 사용 가능합니다.

하지만 Next.js 13에는 아직 cache 함수가 구현되어 있지 않아 Not implemented 에러가 발생합니다. 지금 상황에서 임시적으로 사용할 수 있게 간단하게 구현해 보았습니다.

export function cache<_T extends Function>(fn: _T): _T {
  type T = _T extends (...args: any) => any ? _T : (...args: any) => any;

  type FnWithCaches = T & {
    __entries?: [(...args: Parameters<T>) => boolean, ReturnType<T>][];
  };

  const cachedFn = function (
    ...args: Parameters<T extends (...args: any) => any ? T : never>
  ) {
    if (!(cachedFn as FnWithCaches).__entries) {
      (cachedFn as FnWithCaches).__entries = [];
    }

    for (const entry of (cachedFn as FnWithCaches).__entries!) {
      if (entry[0](...args)) {
        return entry[1];
      }
    }

    const newEntry: [(...args: Parameters<T>) => boolean, ReturnType<T>] = [
      (...otherArgs) => otherArgs.every((a: any, i: number) => a === args[i]),
      fn(...args),
    ];
    (cachedFn as FnWithCaches).__entries!.push(newEntry);

    return newEntry[1];
  };

  return cachedFn as unknown as _T;
}