[suggestion] loading and error state

[hotchpotch]

Hi, I tried typesaurus-react that is very easy React Hooks is good 😸

However I want to know loading and error state.

loading state

const user = useGet(users, 42)

This case don't know that is either data not found or data now loading.

for example interface

const [user, loading] = useGet(users, 42)
if (loading) {
  return <span>now loading...</span>
} else {
  if (user) {
    return <span>hello {user.name}!</span>
  } else {
    return <span>user not found</span>
  }
}

This case know not found or now loading.

error state

And If firestore throw error I get error state.

const [user, loading, error] = useGet(users, 42)

if (error) {
  return <div>ERROR: didn't get user</div>
}
...

These example interface are same react-firebase-hooks.

---

I think it would be useful to have these, but what about?

[kossnocorp]

You could determine if data is still loading by comparing it with undefined. When a document is missing, then it will be equal null. Regarding the error state, I like the proposal, will work on that 👍

[hotchpotch]

I see about null or undefined, thanks!

Also thank you for thinking about error state 😄

[kossnocorp]

Finally going to take care of it!

[kossnocorp]

I've shipped v4 with this feature and it looks like that:

function Component({ userId }: { userId: string }) {
  const [user, { loading, error }] = useGet(users, userId)

  if (user) {
    return <div>Hello, {user.data.name}</div>
  } else if (loading) {
    return <div>Loading...</div>
  } else if (error) {
    return <div>Failed to load the user!</div>
  }
}