문제 코드

• DB 호출 간 무한 재귀(=fetch → setState → 다시 fetch 반복) 해서 무한 재귀 발생.

• GroupContext → fetchGroups() 실행 시 groups 상태 변경

• GroupMemberContext 가 groups 변화에 반응해 fetchMemberCount() 실행

• memberCounts 변경이 다시 GroupContext 의 useEffect 를 재실행시킴

  → 결과: 서로의 상태 변화를 계속 트리거하며 무한 루프 발생함..

useEffect(() => {
  fetchGroups();           
}, [memberCounts]);          

// GroupMemberContext.tsx
useEffect(() => {
  fetchMemberCount(groupId); 
}, [groups]);  

해결 된 코드

const fetchGroups = useCallback(async (slug?: string) => {
  // ...Supabase 쿼리들.........
}, []);

// GroupMemberContext.tsx
useEffect(() => {
  if (!groupId) return;
  fetchMemberCount(groupId);
}, [groupId]);    

• Context 간 상태가 서로 의존해 “fetch → state → fetch” 루프가 돌았음..
• useCallback으로 fetch 함수를 메모이제이션하고, deps를 최소 단위(groupId) 로 축소해 상호 호출을 차단함!