useResource 훅 (캐시 + 디덥)

#36ReactMedium

useResource 훅 (캐시 + 디덥)

useResource 훅

키 기반 캐시와 동시 요청 디덥(dedup)을 갖춘 데이터 페칭 훅을 구현하세요.

시그니처

function useResource<T>(
  key: string,
  fetcher: () => Promise<T>
): {
  data: T | undefined;
  error: Error | null;
  isLoading: boolean;
  refetch: () => void;
};

요구사항

인-메모리 캐시: 같은 key로 두 번 마운트되면 두 번째는 캐시에서 즉시 읽어옴 (네트워크 호출 없음).
동시 요청 디덥: 같은 key에 대해 진행 중인 요청이 있으면 새 fetcher 호출을 만들지 않고 기존 promise를 공유.
refetch: 캐시와 in-flight 요청을 무효화하고 fetcher를 다시 호출.

학습 포인트

TanStack Query / SWR의 핵심 아이디어 (request dedup, cache by key) 구현
Module-level Map을 통한 캐시 공유
컴포넌트 라이프사이클과 캐시 라이프사이클의 분리

import { useEffect, useState, useCallback } from 'react';

// 모듈 레벨 캐시: key -> 완료된 데이터
const cache = new Map<string, unknown>();
// 모듈 레벨 in-flight 요청: key -> 진행 중 Promise (디덥용)
const inflight = new Map<string, Promise<unknown>>();

export function useResource<T>(key: string, fetcher: () => Promise<T>) {
  const [data, setData] = useState<T | undefined>(() => cache.get(key) as T | undefined);
  const [error, setError] = useState<Error | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(() => !cache.has(key));
  const [version, setVersion] = useState(0);

  useEffect(() => {
    // TODO:
    //   1) cache.has(key)면 캐시값으로 data 채우고 isLoading=false로 빠르게 반환
    //   2) inflight.has(key)면 그 promise를 await (디덥)
    //   3) 그렇지 않으면 fetcher()를 호출해 inflight에 저장, 완료되면 cache에 저장 + inflight 제거
    //   4) 결과를 data에 반영, 실패 시 error 반영
    let cancelled = false;
    // TODO: 위 로직 구현
    return () => { cancelled = true; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [key, version]);

  const refetch = useCallback(() => {
    cache.delete(key);
    inflight.delete(key);
    setVersion(v => v + 1);
  }, [key]);

  return { data, error, isLoading, refetch };
}

// 테스트가 캐시를 초기화할 수 있도록 export
export function __resetResourceCache() {
  cache.clear();
  inflight.clear();
}

Open Sandbox

Sandpack 로드 중…

import { useEffect, useState, useCallback } from 'react';

// 모듈 레벨 캐시: key -> 완료된 데이터
const cache = new Map<string, unknown>();
// 모듈 레벨 in-flight 요청: key -> 진행 중 Promise (디덥용)
const inflight = new Map<string, Promise<unknown>>();

export function useResource<T>(key: string, fetcher: () => Promise<T>) {
  const [data, setData] = useState<T | undefined>(() => cache.get(key) as T | undefined);
  const [error, setError] = useState<Error | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(() => !cache.has(key));
  const [version, setVersion] = useState(0);

  useEffect(() => {
    // TODO:
    //   1) cache.has(key)면 캐시값으로 data 채우고 isLoading=false로 빠르게 반환
    //   2) inflight.has(key)면 그 promise를 await (디덥)
    //   3) 그렇지 않으면 fetcher()를 호출해 inflight에 저장, 완료되면 cache에 저장 + inflight 제거
    //   4) 결과를 data에 반영, 실패 시 error 반영
    let cancelled = false;
    // TODO: 위 로직 구현
    return () => { cancelled = true; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [key, version]);

  const refetch = useCallback(() => {
    cache.delete(key);
    inflight.delete(key);
    setVersion(v => v + 1);
  }, [key]);

  return { data, error, isLoading, refetch };
}

// 테스트가 캐시를 초기화할 수 있도록 export
export function __resetResourceCache() {
  cache.clear();
  inflight.clear();
}

Open Sandbox