use() Hook의 Infinite Suspension Loop 해결을 위한 Promise Identity 안정화 전략

React.js ~use() hook for Caching Problem~

Ogasawara Kakeru2026년 5월 24일3분intermediate

AI 요약

Context

Client Component 내에서 Promise를 직접 생성할 때 발생하는 Reference 변경으로 인한 무한 리렌더링 문제 분석. use() Hook이 데이터 Fetching 도구가 아닌 Promise Resolver로 동작함에 따라 발생하는 Identity 불일치 한계점 식별.

Technical Solution

Server Component에서 Promise를 생성하여 Client Component로 전달함으로써 Reference 안정성 확보
Module-level Map 기반 Cache 구조 설계를 통한 동일 인자에 대한 Promise Identity 유지
Cache Wrapper 함수에서 async 키워드를 제거하여 불필요한 Promise 재생성 방지
서버 요청 생명주기 내 데이터 중복 제거를 위한 React cache() API 도입
단순 조회 패턴의 경우 외부 라이브러리 없이 5행 내외의 Custom Cache 함수로 의존성 최소화
데이터 성격에 따라 요청 범위 기반의 cache()와 컴포넌트 범위의 useMemo를 구분하여 적용

실천 포인트

1. use() Hook 전달 값의 Reference가 Render Cycle마다 변경되는지 확인

2. Client-side Fetching 시 단순 Map 기반의 Promise Caching 적용 검토

3. Cache 함수 정의 시 async 선언으로 인한 신규 Promise 생성 여부 체크

4. 전역 상태 및 복잡한 Revalidation 필요 시 TanStack Query 등 전문 라이브러리 도입 고려

5. Server Component 내 중복 Fetch 제거를 위해 React cache() 활용

태그

#Memoization #React #Caching #Promise #Suspense

원문 읽기