useEffect 가 끊임없이 돌고있어요. dependency 의 늪에서 벗어날 수 있게 도와주세요..! 🥹

안녕하세요. 소켓 통신을 사용한 채팅 기능 구현중인 주니어 개발자입니다. 아래와 같은 상황에 보통 어떻게 대처하시나요? 문제: useEffect 사용 시 서버에 채팅 방 말풍선 목록을 요청(publish)하고, 요청한 데이터를 state 에 저장하는 과정에서 loop 가 생겨 useEffect 가 끊임없이 돌고 있습니다. 문제 설명: - 서버에 채팅 방 말풍선 목록을 요청할 때 넘기는 값 중에 direction 이라는 변수가 있는데요, 이 direction 변수는 채팅 방 말풍선 개수에 의존적입니다. 따라서 useEffect 의 dependency에 채팅 방 말풍선 목록이 들어가게 됩니다. - 서버로부터 데이터를 받은 즉시 채팅방 말풍선 목록을 state에 저장하게 됩니다. - 위 두 상황(useEffect의 deps 설정, setState) 때문에 loop 가 생기게 됩니다. 생각해본 해결 방안: - useRef 를 사용하여 deps 에 등록하지 않아도 최신 데이터를 바라볼 수 있습니다. - 말풍선 목록이 배열 데이터이기 때문에, 새로운 배열을 만들지 않고 기존 배열을 계속 사용하여 같은 메모리를 사용합니다. 같은 메모리를 사용하고 있기 때문에 useEffect 의 deps 에 등록하지 않아도 최신 데이터를 바라볼 수 있습니다. - 말풍선 목록을 링크드리스드 자료구조를 사용하고, 한 번 생성한 자료구조를 새로 만들지 않고 재사용하여 같은 메모리를 이용합니다. 같은 메모리를 사용하고 있기 때문에 useEffect 의 deps 에 등록하지 않아도 최신 데이터를 바라볼 수 있습니다. 위 해결 방안의 문제점: - useEffect 의 deps 에 등록하지 않는 방법은 anti pattern 이라는 느낌을 받습니다. 아마도 위 방법을 사용한 데이터를 사용하는 컴포넌트의 re-rendering 이 되지 않기 때문에 이런 느낌을 받는 것 같습니다. 참고 자료: [react 문서](https://react.dev/learn/removing-effect-dependencies#are-you-reading-some-state-to-calculate-the-next-state)