isPending vs isLoading

Question

안녕하세요 로펀님 tanstackquery에서 최근에 isPending이 생겨서 어느 블로그에선가 봤는데 이제 isPending을 사용하면 된다고 했던 것 같은데 혹시 둘의 차이가 있을까요? 어느 시점에서는 이것을 사용해야 한다라는 가이드가 있을까요?

로펀 · Answer

안녕하세요 🙂 isPending을 공식문서에서 추천하는 이유를 예시와 함께 설명드릴게요! - isPending 는 status 필드에서 직접 파생된 상태입니다. - 반면, isLoading 은 status 와 fetchStatus 두 가지 상태를 조합한 상태입니다. 그렇기 때문에 isLoading 과 isError 를 체크한다고 해서 "데이터가 이제 확실히 사용 가능하다"는 보장이 없습니다. 반면, isPending 을 체크하면 데이터의 상태를 더 정확하게 알 수 있습니다. 또한, TypeScript는 pending 과 error 를 확인했을 때만 undefined 타입을 제거 합니다. 예시 - isPending : 이 상태는 데이터를 불러오는 중임을 나타냅니다. 즉, 데이터가 아직 로딩 중일 때 isPending 이 true가 됩니다. - isLoading : 이 상태는 데이터를 불러오는 중이거나 재시도 중일 때 true가 됩니다. 예를 들어, 데이터를 불러올 때 isLoading 이 true일 수도 있지만, 에러가 발생했을 때도 여전히 isLoading 이 true일 수 있습니다. 이런 경우, 데이터를 사용할 수 있는지 확실히 알 수 없습니다. 하지만 isPending 은 에러가 없고, 데이터가 로딩 중이기만 한 경우를 나타내므로, isPending 이 false로 바뀌면 데이터가 로딩을 완료했음을 알 수 있습니다. 따라서, 데이터를 안전하게 사용하기 위해서는 isPending 상태를 체크하는 것이 더 정확하고 안정적이라는 이유입니다! https://github.com/TanStack/query/discussions/6297