RN FlatList의 loader가 늦게 표시되는데 개선할 방법이 있을까요?

Question

React Native의 FlatList를 이용해서 무한스크롤 목록을 만들었습니다.
데이터는 react-query의 useInfiniteQuery를 이용해서 가져오고 있고요.

FlatList의 ListFooterComponent와 react-query의 isFetchingNextPage 값을 이용해서 다음 목록을 가져올 때 목록 하단에 loader를 표시해주고 있는데 loader가 늦게 나타납니다. (코드 사진 첨부합니다.)

loader가 나타나는 속도를 개선할 수 있는 방법이 있을까요?

이은재 · Answer

isFetchingNextPage는 다음 페이지를 실제로 가져오기 시작해야 값이 true가 되기 때문에 반응이 조금 느릴 수 있을 것 같아요.

데이터를 실제로 가지고 오는 것을 확인하기 보다 다음 목록이 존재하는지 여부만 확인해서 로더를 표시하면 더 빨리 표시할 수 있을 것 같습니다. isFecthingNextPage 대신 hasNextPage 값을 확인하고 앞에 !isInitializing 조건을 추가로 붙여주면 될 것 같아요.

isFecthingNextPage -> !isInitializing && hasNextPage