왜 공식문서 에서는 isLoading 대신 isPending을 사용하라고 할까? - Tanstack git isLoading vs isPending

출처 https://github.com/TanStack/query/discussions/

Tanstack 에서 가지구 와봤습니다,

이제는 isLoading 대신 isPending?

간단한 isPending 과 isLoading 의 차이
isPeding 는 status 필드에서 직접 파생된 상태입니다
isLoading 은 status 와 fetchStatus 두 가지 상태를 조합한 상태입니다.

따라서 isLoading 과 isError 를 체크한다고 해서 "데이터가 확실히 사용 가능하다" 라는 보장은 어렵습니다. 또한
TypeScript 는 pending 과 error 를 확인했을 때만 undefined 타입을 제거합니다

해당 출처 글에서 내용을 보고 구체적으로 설명하자면,

TypeScript 는 상태에 따라 데이터가 로드되기 전 (pending) 이거나 오류가 발생한 상태 (error) 에서 데이터가 undefined 일 수 있다고 가정합니다. 하지만 pending 상태에서 벗어나거나 (false) error 가 없음을 확인한 후에는, Typesciprt 는 데이터가 undefined가 아니라고 안전하게 추론할 수 있습니다 즉, undefined 타입을 제거해 데이터가 정상적으로 사용 가능하다고 간주합니다.

따라서 isPending 과 isError 를 먼저 체크해야 Typescript가 "이제 데이터가 안전하게 정의되어 있으니 사용해도 된다" 는 확신을 줍니다.

공식 문서를 보면

function Todos() {
  const { isPending, isError, data, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

![](https://velog.velcdn.com/images/houndhollis/post/3a6ed063-3b5d-43b4-9b97-f06f5b2d095f/image.png)
  if (isPending) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

  // We can assume by this point that `isSuccess === true`
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

데이터를 불러오는 부분도 isPending, isError 를 사용해서 처리하는 부분도 확인할 수 있습니다.

결론

데이터를 안전하게 사용하기 위해서는 isPending 상태를 체크하는 것이 더 정확하고 안정적이라고 생각합니다.