useQuery 사용 시 렌더링이 2번 씩 일어나는 문제

문제

useQuery를 적용해보던 중 컴포넌트 렌더링이 두번씩 일어나는 상황이 발생했다.
쿼리문은 아래와 같고, 받은 데이터를 props로 전달하는 아주 간단한 코드이다.

  const {isLoading} = useQuery(
    'postList', usePostApi.get, {
      cacheTime: Infinity,
      onSuccess: data => {
        setPostList(data)
      },
      onError: e => {
        console.log(e)
      }
    }
  )
  return (
    <ListTemplate listData={postList}/>
  )
  

전달받은 데이터는 아래의 과정을 거친다.

1. 데이터를 전달받은 좋아요 버튼 컴포넌트를 클릭하면 좋아요 수를 +1 시키는 post 요청을 실행하고
2. 서버에서는 요청을 받아 데이터를 바꾸고 useQuery가 다시 클라이언트로 전달한다.
3. 바뀐 data는 props로 컴포넌트들에 다시 전달한다.

이런 상황에서 해당 data를 전달받는 컴포넌트들이 두번씩 렌더링 되는 문제가 생겼다.
데이터가 변한거 없이 그저 마치 시작 마운트 되듯이 두번씩 렌더링 되고 그 이후 +1 기능을 수행하는 것이었다.

---

해결

한참 해맨 결과 이 문제는 useQuery의 깃 이슈에서 확인할 수 있었다.

https://github.com/TanStack/query/issues/787

우선 리액트는 StrictMode일때 앱의 문제를 알아내기 위해 처음 페이지 렌더링을 두번 시킨다.

그런데 나는 처음 렌더링도 아니고, StrictMode를 false로 해보아도 해당 문제가 일어났는데
결론은 useQuery가 어떤 다른 의존성 패키지들과의 충돌로, 위의 두번 렌더링이 잘못 발생하게 된다는 것.

해당 문제를 겪은 사람들은 node_modules를 삭제하고 다른 패키지들을 업데이트 하니까 사라졌다고 한다.
useQUery쪽에서도 해당 이슈가 본인들의 문제가 아닌 것으로 파악되어 이슈를 종료했다.

결론은 내가 해결할수 있는 나의 문제가 아니라는 것..
의심가는 패키지들을 하나씩 지워봐야겠다.