Discussion on: React Beginner Question Thread ⚛

[Vincent Bel]

I have a question about network request.

Usually I will use a isFetching state for network requesting.

1. Initially isFetching === false, render with empty data.
2. In componentDidMount, dispatch fetch request, set isFetching to true, render with a <Loading > component.
3. After fetching completed, set isFetching to false, render with fetched data or error message.

Is there a good(safe) way to initially render a <Loading> component, rather than rendering with empty data. Thanks~

And the question is first asked at the stackoverflow comment.

---

I think using the isFetching state may not reflect the "fact", it is actually consist of the four state as the post point out:

• Not asked
• Loading
• Success with data
• Error with message

And the elm code in the post:

type RemoteData e a
    = NotAsked
    | Loading
    | Failure e
    | Success a

And we may change the state to:

state = {
  networkState: 'NotAsked', // || 'Loading' || 'Failure' || 'Success',
  data: null, // use this data only if `networkState === 'Success'
  error: null, // use this data only if `networkState === 'Failure'
}

What do you think of this approach? (This may be a second question 😅)

[Dan Abramov]

This makes sense to me. There are also other states with pagination (e.g. “nothing more to fetch”).