when to use componentWillMount instead of componentDidMount

Question

I just couldn't find the practical usage example of these two life cycle method. I've been writing in react for a while, but componentDidMount just get the job done, it means to call fetch async data, but I don't see the point of willMount, any clue?

Answer 1

Comparing the two:

componentWillMount runs before initial rendering. But it is not advised to do any subscriptions and state setting in this method. If you want to some of that before rendering you can use the constructor of the component.

componentWillMount() is invoked immediately before mounting occurs. It
is called before render(), therefore calling setState() synchronously
in this method will not trigger an extra rendering. Generally, we
recommend using the constructor() instead. Avoid introducing any
side-effects or subscriptions in this method. For those use cases, use
componentDidMount() instead.

Possible use cases:

• setup initial state of component (but you can use constructor for that)
• run server side code in server side rendering for initial state
• fetch data and set the initial state

componentDidMount however runs after the initial rendering and marks when the Component has finally finished mounting the DOM. So you can use this to set up subscriptions and listeners and even fetch data to setState.

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. This method is a good place to set up
any subscriptions. If you do that, don’t forget to unsubscribe in
componentWillUnmount(). Calling setState() in this method will trigger
an extra rendering, but it will happen before the browser updates the
screen. This guarantees that even though the render() will be called
twice in this case, the user won’t see the intermediate state. Use
this pattern with caution because it often causes performance issues.
It can, however, be necessary for cases like modals and tooltips when
you need to measure a DOM node before rendering something that depends
on its size or position.

Possible use cases:

• setup event listeners because the component is already mounted
• fetch data and setState
• setup third party libraries that depend on the DOM

BIG DIFFERENCE: In Server Side Rendering only componentWillMount runs in the server side. So if you're ever using SSR make sure you don't have any server side code in componentDidMount

Currently you can (you decide if you should) use both to setup initial state. Generally I've seen most people use componentDidMount for this but requirements change and you might find some use case for using componentWillMount.

There has been however talks about deprecating the lifecycle method. here

Answer 2

Difference between componentWillMount and componentDidMount is in terms of when they are called. componentWillMount is called before render which means setting state synchronously in componentWillMount will not cause extra render call while componentDidMount is called after a render and hence any state change in this method will cause one extra render call.

For any async call componentDidMount is the one to be used instead of componentWillMount.

Answer 3

UPDATE REACT 17

componentWillMount is deprecated as of React 16.3 (March 2018). Until React 17, this method will continue to work. In place of it, you can use the constructor in a class component OR componentDidMount.

From the official docs:

UNSAFE_componentWillMount() was previously named componentWillMount. That name will continue to work until version 17. Use the rename-unsafe-lifecycles codemod to automatically update your components.

Answer 4

I'm using componentWillMount regularly. In my case I'm using it as "constructor" instead of the real constructor.

componentWillMount() {
    this.setState({
        myKey: myValue
    });
}

instead of

constructor(props) {
    super(props);

    this.state = {
        myKey: myValue
    };
}

You save some lines of code and don't have to call the super function. With that you could then send your ajax requests, too - instead of using two functions (constructor and componentDidMount).

ComponentWillMount is called earlier in the lifecycle than componentDidMount, so this is often the right place to put things which have to be done very soon.

This is not a strong argument, but strong enough to explain why componentWillMount is useful at all.

Answer 5

ComponentWillMount could be used to initialize some variables, objects or API libraries. For example I used before to get the location of the user from an API using an AJAX call. With this call I get the location and I save the location to be use in the App when it's going to be rendered.

ComponentDidMount is perfect to subscribe and make changes to the DOM, because at this moment the DOM should be ready. There is one anti-pattern that said you must avoid to use AJAX calls and set of data in ComponentDidMount, but I think that depends on your solution and how you handle the render function.