Do people prefer status booleans or types?

[cmacdonnacha]

I recently read this article and it made me think; what is better to use in react-query: isLoading or status === 'loading'

boolean:

function TodoList() {
const { data, isLoading } = useQuery('todos', fetchTodos)

  if (isLoading) {
    return 'Loading...'
  }

  return (
    <div>
      {todos.data.map((todo) => (
        <Todo key={todo.id} {...todo} />
      ))}
    </div>
  )
}

type:

function TodoList() {
const { data, status } = useQuery('todos', fetchTodos)

  if (status === 'loading') {
    return 'Loading...'
  }

  return (
    <div>
      {todos.data.map((todo) => (
        <Todo key={todo.id} {...todo} />
      ))}
    </div>
  )
}

Does it matter? Is it just a matter of preference in the case of react-query since you're not dealing with setting isLoading yourself?

[TkDodo]

it doesn't matter. isLoading is exactly the same as status === 'loading'.
The article means to not store booleans in state, which react-query doesn't do. Derived booleans are fine. Probably js users prefer them because there is no type safety when comparing strings

[cmacdonnacha]

Thanks for that, at least in TS you'll see the type annotations.

[cmacdonnacha]

One other small advantage to using types would be that it's less variables to deal with if you use multiple:

const { data, isLoading, isError, isIdle, isSuccess } = useQuery('todos', fetchTodos)

const { data, status } = useQuery('todos', fetchTodos)

[TkDodo]

@jcready potentially, and tracked is the default behaviour in v4. however, it's pretty unlikely to be better because the query already starts in loading state, so going from loading to success will have two renders, always.

only thing I could see is if you observer status, but don't actually render errors, and then you get an error, your component will re-render with the error status... but errors should likely be handled :)