Use componentWillMount or componentDidMount lifecycle functions for async request in React

Question

I am reading up on react lifecycle and am getting a little confused. Some recommend using componentWillMount to make ajax calls:

https://hashnode.com/post/why-is-it-

Answer 1

ComponentDidMount is the place.

But if you have time try to look at Redux and make the requests in actions, as your application grow it will help a lot to manage the app state.

;)

Answer 2

The React docs recommend on using componentDidMount for making network Requests

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

Calling setState() in this method will trigger an extra rendering, but it is guaranteed to flush during the same tick. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state.

As per the case for componentWillMount:

EDIT:

This lifecycle is deprecated since v16.3.0 of react and is no longer encouraged for usage.However its renamed to UNSAFE_componentWillUpdate and is expected to work till at least v17 of react

Before v16.3.0

An asynchronous call to fetch data will not return before the render happens. This means the component will render with empty data at least once.

There is no way to “pause” rendering to wait for data to arrive. You cannot return a promise from componentWillMount or wrangle in a setTimeout somehow. The right way to handle this is to setup the component’s initial state so that it’s valid for rendering.

To Sum it up

In practice, componentDidMount is the best place to put calls to fetch data, for two reasons:

• Using DidMount makes it clear that data won’t be loaded until after the initial render. This reminds you to set up initial state properly, so you don’t end up with undefined state that causes errors.
• If you ever need to render your app on the server, componentWillMount will actually be called twice – once on the server, and again on the client – which is probably not what you want. Putting the data loading code in componentDidMount will ensure that data is only fetched from the client.

Answer 3

componentDidMount is the recommended lifecycle method to make Ajax calls as described in their docs