MommySon - useQuery 사용 시 렌더링 두 번 되는 문제

개요

• react-query의 훅인 useQuery를 사용해서 데이터를 read했을 때 렌더링이 두 번 발생하는 현상을 확인할 수 있다.
• 내가 의도하지 않은 재렌더링일 뿐더러 원인이 불명하기 때문에 원인 파악을 해봤다.

문제 발생 코드

• 홈페이지에 랜딩했을 때 존재하는 유저인지 확인하기 위해 useQuery를 사용했다.

const Home = () => {
 const { data } = useQuery('user', checkUserExist);
 console.log('data:', data);
 return (....)
}

문제 발생 원인

• stackoverflow에 의하면 첫번째 fetching 중에 한 번 발생하고, success 후에 한 번 발생하는 것이며, 이는 정상적인 동작이라는 답변이 있다.

  

검증

• useQuery의 반환값 중 하나인 isFetching을 사용하여 검증해봤다.
  • isFetching : Request가 in-flight 중일 때 true를 반환

const Home = () => {
 const { isFetching, data } = useQuery('user', checkUserExist);
 console.log('isFetching:', isFetching);
 console.log('data:', data);
 return (....)
}

• 답변대로 fetching 중일 때 한번 렌더링이 발생하고, fetching이 완료되었을 때 렌더링이 다시 발생하는 것을 확인할 수 있다.
• 여기서 드는 의문은 fetching인데 어떻게 데이터가 찍히는 걸까...? 또 다른 반환값 중 하나인 isSuccess를 사용해봤지만 첫 번째 렌더링부터 isSuccess가 true(통신 완료)로 출력돼서 이유를 파악하기 힘들다...

개선사항

• 내가 원하는 건 홈버튼을 눌렀을 때만 useQuery가 적용되고 그 다음부터는 특정 조건에만 useQuery를 활성화시키고 싶다. (무분별한 재렌더링 방지)
• 사이드 이펙트로 useQuery를 할 수 있는 방법이 있는지 확인해봐야 한다.