무한 스크롤 페이지에서 빠르게 스크롤 할 경우 데이터를 불러오지 못함

[ucharles]

문제

• 랜딩 페이지에서 무한 스크롤을 이용하는데, 빠르게 스크롤할 경우 다음 데이터를 불러오지 못하는 문제

원인

• 데이터를 불러오는 트리거인 스켈레톤 UI가 빠르게 스크롤할 시 존재하지 않기 때문

[ucharles]

코드를 아래와 같이 수정함.

이렇게 수정함으로써, inView가 true가 되어 다음 페이지를 fetch해야 할 상황에서 hasNextPage가 true이고 isFetchingNextPage가 false인 경우에만 fetchNextPage 함수가 호출됨. 이는 isFetchingNextPage 상태가 변할 때마다 useEffect가 다시 평가되도록 하여, 스크롤을 빠르게 하더라도 연속적으로 데이터를 fetch할 수 있게 함.

수정 전

useEffect(() => {
  if (inView && hasNextPage && !isFetchingNextPage) {
    fetchNextPage();
  }
}, [inView && hasNextPage]);

수정 후

useEffect(() => {
  if (inView && hasNextPage && !isFetchingNextPage) {
    fetchNextPage();
  }
}, [inView, hasNextPage, isFetchingNextPage]);