fetch() with status code checking and re-routing
I don't see many example for status code checking


I think this way of thinking is a remnant of jQuery.ajax where anything not 2xx rejects the promise. On the other hand, fetch makes a request, and returns an object that represents the response. It's up to you and your app to decide what's a "correct" response from a "wrong" response.

Coming from an Angular background, the task of capturing 403s and doing redirects is the job of an HTTP interceptor service and not your component. This way, your component is not aware of this logic (it simply makes requests) and the behavior is applied globally on all your API calls. But since React doesn't have the same service structure, we'll make do with wrapping functions. 

So ideally, what your component should only ever contain is:

someWrappedVersionOfFetch(...)
  .then(response =&gt; response.json())
  .then(data =&gt; {
    this.setState({
      data: data,
      loaded: true,
      isModalActive: false,
      selectedElement: null,
      selectedId: null,
    }))
  })


Then the wrapped fetch would be like:

export const someWrappedVersionOfFetch = (...args) =&gt; {
  return fetch(...args)
    .then(response =&gt; {

      if (response.status !== 200) {
        // Update your history and reject the promise
        history.pushState( APP_LOGIN_PATH )
        return Promise.reject(response)
      } else {
        // Just pass response through.
        return Promise.resolve(response)
      }
    })
}


The above answers your first question. For your second question, you could do it like the second snippet. You put the conditional on the first then, have it conditionally return a resolved or rejected promise. Then just chain the one with setState after it.