Should loading become true by default?

[kykungz]

I noticed loading in useAxios is initially set to false, which causes bug in my program.

For example:

const { data, loading, error } = useAxios({ url: API_URL })

return loading
    ? <div>loading...</div>
    : <div>{data.firstName}</div>

It is causing bug because loading is initially set to false, so <div>{data.firstName}</div> is being rendered and got firstName of undefined.

[kykungz]

@zakangelle any progress or opinion on this?

I prefer having loading initially set to true because I came from @apollo/react-hooks, which have loading of true when it first renders, so we only need to guard the loading instead of both loading and data.

[therealparmesh]

I can see the case for loading being true by default for useAxios, but not for useLazyAxios.

[zxqx]

Yeah, I think I agree with this - let's do it.

Also, it doesn't look like you're using TS in this app, but something to be aware of: in your code example, having loading be true initially would not make accessing data.firstName typesafe.

You would either need a runtime check:

<div>{data && data.firstName}</div>

or a default value for data:

const { data = {}, loading, error } = useAxios({ url: API_URL });