Use componentWillMount or componentDidMount lifecycle functions for async request in React

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-a-bad-idea-to-call-setstate-immediately-after-componentdidmount-in-react-cim5vz8kn01flek53aqa22mby

Calling setState in componentDidMount will trigger another render() call and it can lead to layout thrashing.

and in other places it says not to put ajax calls in the componentWillMount:

https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d

...this function might end up being called multiple times before the initial render is called so might result in triggering multiple side-effects. Due to this fact it is not recommended to use this function for any side-effect causing operations.

Which is correct?

javascript ajax reactjs
Reese

Answers 1

Submit Answer
  • Erica

    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 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.

Related Articles