Today목표 : 06/14일 성능 개선 / 렌더링 최적화 - QueryClient - defaultOptions : refetchOnWindowFocus
이번 주 부터는 기능구현이 어느정도 완성되었기 때문에 성능 개선 및 렌더링 최적화를 슬슬 진행해보고자 한다. 먼저 react-query 사용 시 발생하는 불필요한 데이터 통신 옵션을 꺼주었다.
문제 상황,
react-query 사용 시 윈도우에 포커스 할 때 마다 계속해서 데이터 통신이 refetch되는 현상 발생
해결 방법,
index.js 에서 queryClient의 defaultOption으로 'refetchOnWindowFocus'를 false로 설정해 준다.
// index.js 에서 queryClient
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
},
},
});
728x90
반응형
'항해99 > 프로젝트' 카테고리의 다른 글
[TIL-36] 무한 스크롤 기능 구현 - Intersection Observer API (0) | 2023.06.19 |
---|---|
[TIL-35] react-query와 검색 기능에서의 캐싱 처리 (1) | 2023.06.15 |
[WIL-33] 실전 프로젝트 중간 발표 - 결과 / 회고록 (1) | 2023.06.12 |
[TIL-32] 실전 프로젝트 - 검색 기능 구현(useContext로 전역 상태, 검색 쿼리 관리하기) (0) | 2023.06.05 |
[WIL-031] 클론 프로젝트 - Out Stagram 인스타그램 클론코딩 (0) | 2023.05.28 |