Vfrdtyky

Why don't we write

axios

  .get('https://rallycoding.herokuapp.com/api/music_albums')

  .then(response => this.setState({ albums: response.data }));

inside the render method, do we have to put it in componentWillMount?

What would be wrong if we put it at the beginning of the render method?

I put it in the render and got the same result but the tutorial says that it should be in componentWillMount.

In general, the difference between the two would be in how many times do you want to make this request.

If you want the request to happen only the first time the component is mounted, you will use ComponentWillMount (preferable)

If you want the request to happen on every render (discouraged), then use the render method.

In your case, putting it in the render method would actually cause an infinite recursion because each request calls setState which will cause a re-render which will make the request which will call setState which will cause a re-render...

Not to mention the cost on performance as well as the network congestion from so many frequent requests.

class Example extends React.Component {

  constructor() {

    super()

    this.state = {

      counter: 0

    }

  }

  render() {

    // fake async action to act as a request

    setTimeout(() => {

      const { counter } = this.state;

      this.setState({

        counter: counter + 1

      })

    }, 500)

    return React.createElement('h3', null, this.state.counter)

  }

}



ReactDOM.render(

  React.createElement(Example),

  document.querySelector('#example')

)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

<h2>Re-rendering forever</h2>

<div id="example"></div>