Error "Maximum call stack size exceeded" when using a component with fetch

I have this component that brings data from an API:

class GetDPIData extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: null
    }
  }
  componentDidMount() {
    fetch('/api/dpi/')
      .then(res => res.json())
      .then(data => this.setState({ data }))
  }
}

And when I add it to another component (type <GetDPIData /> ), it fails with the following error message:

Uncaught RangeError: Maximum call stack size exceeded
    at Object.asyncReconciledRender [as componentWillRender] 
    (react-hot-loader.development.js:1507)

Now, the error reports found in the network refer to a misconfiguration of react-hot-loader or webpack-dev-server , but in my case, this error appears only when you add the component GetDPIData , as long as this component is not loaded, everything works as expected.

I tried not to use arrow functions, passing componentDidMount() to this:

componentDidMount() {
  fetch('/api/dpi/')
    .then(function(res) {
      return res.json()
    }
    .then(function(data) {
      this.setState({ data })
    }
}

Equal without success.

The complete error is:

react-hot-loader.development.js:1491 Uncaught RangeError: Maximum call stack size exceeded
    at renderReconciler (react-hot-loader.development.js:1491)
    at Object.asyncReconciledRender [as componentWillRender] (react-hot-loader.development.js:1508)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:608)
    at ProxyComponent.proxiedRender (react-hot-loader.development.js:635)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:620)
    at ProxyComponent.proxiedRender (react-hot-loader.development.js:635)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:620)
    at ProxyComponent.proxiedRender (react-hot-loader.development.js:635)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:620)
    at ProxyComponent.proxiedRender (react-hot-loader.development.js:635)
renderReconciler @ react-hot-loader.development.js:1491
asyncReconciledRender @ react-hot-loader.development.js:1508
hotComponentRender @ react-hot-loader.development.js:608
proxiedRender @ react-hot-loader.development.js:635
hotComponentRender @ react-hot-loader.development.js:620
proxiedRender @ react-hot-loader.development.js:635

...
Muchas líneas iguales que se repiten...
...

hotComponentRender @ react-hot-loader.development.js:620
proxiedRender @ react-hot-loader.development.js:635
react-dom.development.js:14389 The above error occurred in the <GetDPIData> component:
    in GetDPIData (created by DPI)
    in div (created by DPI)
    in DPI (created by Route)
    in Route (created by App)
    in div (created by App)
    in App
    in Router (created by BrowserRouter)
    in BrowserRouter

Update

The error persists when I use the Axios library:

  componentDidMount() {
    axios.get('/api/dpi/')
      .then(res => {
        data = res.data
        this.setState({ data })
      })
    }
  }

Update II

By passing the code of componentDidMount() to the parent component, everything works correctly as expected. So it seems to be an error to combine react-hot-loader , ' fetch() and one component ...