re: React Beginner Question Thread ⚛ VIEW POST


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 😅)


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

code of conduct - report abuse