문제 코드

useEffect(() => {
  (async () => {
    const chat = await findOrCreateChat(groupId, targetUserId);
    setCurrentChat(chat);
  })();

  const sub = subscribeRealtime();

  return () => sub.unsubscribe();
  // chats, currentChat 같은 상태를 deps에 넣어 계속 다시 실행됨
}, [groupId, targetUserId, chats, currentChat]);

• useEffect 안에서 setState가 발생하고, deps에 상태(chats, currentChat)가 포함되어 다시 실행 → 또 setState → 무한 루프 발생

문제 해결 코드

const didInitRef = useRef(false);

const safeSubscribe = useCallback(() => {
  const sub = subscribeRealtime();
  return () => sub.unsubscribe();
}, []);

useEffect(() => {
  if (didInitRef.current) return;
  didInitRef.current = true;

  (async () => {
    const chat = await findOrCreateChat(groupId, targetUserId);
    setCurrentChat(chat); 
  })();

  const cleanup = safeSubscribe();
  return cleanup;
}, [groupId, targetUserId, safeSubscribe]);

• useRef로 1회 초기화 가드를 두고, deps를 최소화하고, 구독/콜백은 useCallback으로 안정화해 재실행 끊어버림.