As far as I could see, the only thing a componentWillMount
can do and a constructor
cannot is to call setState
.
componentWillMount() { setState({ isLoaded: false }); }
Since we have not called render
yet, a setState
in componentWillMount
will prepare the state object before we enter the first render()
pass. Which is essentially the same thing a constructor
does:
constructor(props) { super(props); this.state = { isLoaded: false }; }
But I see another use case where componentWillMount
is useful (on server side).
Let's consider something asynchronous:
componentWillMount() { myAsyncMethod(params, (result) => { this.setState({ data: result }); }) }
Here we cannot use the constructor
as assignment to this.state
won't trigger render()
.
What about setState
in componentWillMount
? According to React docs:
componentWillMount()
is invoked immediately before mounting occurs. It is called beforerender(
), therefore setting state in this method will not trigger a re-rendering. Avoid introducing any side-effects or subscriptions in this method.
So, here I think React will use the new state value for the first render and avoids a re-render.
Question 1: Does this means, inside componentWillMount
, if we call setState
in an async method's callback (can be a promise callback), React blocks initial rendering until the callback is executed?
Having this setup on client-side (yes I see that use case in server-side rendering), if I assume the above is true, I will not see anything until my asynchronous method completes.
Am I missing any concepts?
Question 2: Are the any other use cases that I can achieve with componentWillMount
only, but not using the constructor
and componentDidMount
?
componentDidMount() is only called once, on the client, compared to componentWillMount() which is called twice, once to the server and once on the client. It is called after the initial render when the client received data from the server and before the data is displayed in the browser.
According to React docs: componentWillMount() is invoked immediately before mounting occurs. It is called before render( ), therefore setting state in this method will not trigger a re-rendering.
The componentWillMount() lifecycle hook is primarily used to implement server-side logic before the actual rendering happens, such as making an API call to the server. In this guide, you will learn to use componentWillMount() and make API calls after the initial component rendering.
Our React teaching team follow developments in the Facebooks UI-creating library very closely. We update our curriculum every 2 weeks, and recently they came across an update worth sharing with everyone! This is a blog for anyone who builds User Interfaces with React!
Does this means, inside componentWillMount, if we call setState in an async method's callback (can be a promise callback), React blocks initial rendering until the callback is executed?
No, see here.
The following code doesn't block render (bear in mind this would be an anti pattern anyways to call setState there)
componentWillMount: function() { new Promise((resolve, reject) => { setTimeout(()=> { resolve(); }, 2000) }).then(() => this.setState({ promiseResult: 'World' })); },
Question 2: Are the any other use cases that I can achieve with componentWillMount only, but not using the constructor and componentDidMount?
No, for ES6 classes you can discard componentWillMount. It is only needed if you use React.createClass({... })
EDIT: Apparently, I'm wrong. Thanks to @Swapnil for pointing this out. Here is the discussion.
React throws a warning if there is a side effect in the constructor
which modifies state in another component, because it assumes that setState
in the constructor
itself and potentially during render()
is being called. So no side effects in the constructor
are desired.
This is not the case if you do it in componentWillMount
, no errors are thrown. On the other hand, the guys from facebook discourage side effects in componentWillMount
also. So if you don't have any side effects, you could use the constructor
instead of componentWillMount
. For side effects it is recommended to use componentDidMount
instead of componentWillMount
. Either way, you don't need componentWillMount
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With