TIL 24.05.14 react-query refetchOnWindowFocus 옵션

 

https://tanstack.com/query/v4/docs/framework/react/guides/window-focus-refetching

Window Focus Refetching | TanStack Query React Docs

 

 

react-query를 이용해서 기능을 구현하던 도중에, 다른 윈도우창에 갔다오면 데이터가 refetch 되어 기존에 보던 데이터와 달라지는 현상이 있었다. 이는 react-query가 기본제공하는 기능으로 기본값은 다음과 같다.

 refetchOnWindowFocus: true

 

 

그러나 내가 사용하려는 곳에는 실시간으로 데이터가 바뀔 일이 거의 없었고, 나는 이 부분이 사용자가 느끼기에 어색해 보여서 값을 fasle 로 변경해주었다.

 

이밖에도, staleTime 과 cacheTime 을 설정해주어 무분별한 refetch 를 막을 수 있는 방법이 있느니 참고하자.