리액트 쿼리

React Query에서 staleTime은 쿼리의 만료 시간을 설정할 때 사용한다. staleTime이 지나면 쿼리의 캐시 데이터를 오래된 데이터로 간주하고 re-fetching을 시도한다. React Query에선 기본적으로 캐시 데이터 자체를 stale 데이터로 취급하기 때문에 staleTime의 기본값은 0이다. 하지만 변경 주기가 느린 데이터는 서버에 빈번하게 요청할 필요가 없기 때문에 staleTime을 적절하게 조절해주는 작업이 필요하다. 💡 중복 호출을 줄이기 위한 staleTime은 최소 20초 정도가 적당하다 — via tkdodo 1. 개별 쿼리 인스턴스에 staleTime 설정// v4useQuery('users', getUsers, { staleTime: 1000 * 60 });..

문제 원인렌더링 데이터의 마지막 인덱스 위치에 IO(Intersection Observer) 관찰 요소를 표시하는 방식은 무한 렌더링 문제가 발생할 수 있다. 데이터가 1~2개 밖에 없어서 관찰 요소가 항상 화면에 들어온다면 ➊fetchNextPage 실행(React Query 훅이 반환하는 함수) → ➋기존 데이터 반환 → ➌렌더 → ➍IO 화면에 들어옴 → ➊fetchNextPage 실행 → 반복… 위 과정을 계속 반복하면서 무한 렌더링하는 문제가 발생한다. Query Key가 바뀌지 않아서 데이터 fetch 없이 캐싱한 데이터를 사용하지만 무한 렌더링 때문에 어플리케이션이 정상적으로 작동하지 않는다. 데이터가 아예 없다면 IO 관찰 대상 요소도 렌더링 하지 않으므로 문제가 없는것처럼 보이기 때문에 ..