What is the difference between componentWillMount and componentDidMount in ReactJS?

Question

I looked at the Facebook documentation on ( React.Component ) and it mentions how componentWillMount is called on the client / server, while componentDidMount is only called on the client. What does componentWillMount do with the server?

Answer 1

componentWillMount is essentially a constructor. You can set instance properties that do not affect rendering, pull data from storage synchronously and setState with it, as well as another simple free side effect that you need to run when setting up your component.

This is rarely necessary, and not at all with ES6 classes.

Answer 2

constructor method does not match componentWillMount .

According to the author of Redux, it’s risky to send actions from the constructor, because this can lead to a mutation of the state when rendering.

However, submitting from componentWillMount fine.

from github issue :

This happens when dispatcher () inside one constructor component calls setState () inside another component. React keeps track of the "current owner" for such warnings - and it thinks that we call setState () inside the constructor, when technically the constructor calls setState () inside some other part of the application. I don’t think that we should deal with this - it’s just that React is trying its best to do its job. The solution, as you correctly noted, sends () inside componentWillMount ().

Answer 3

To add to what FakeRainBrigand said, componentWillMount is called when rendering React on the server and on the client, but componentDidMount is only called on the client.

Answer 4

componentWillMount is executed before the INITIAL render component and is used to evaluate props and execute any additional logic based on them (as a rule, to update the state), and as such can be performed on the server in order to get the first markup on the server side.

componentDidMount runs AFTER the initial render when the DOM is updated (but above all, the ADDITIONAL DOM update is colored in the browser, which allows you to perform all kinds of advanced interactions with the DOM itself). This, of course, can happen only in the browser itself and therefore does not occur as part of the SSR, since the server can generate markup, not the DOM itself, this is done after it is sent to the browser if the SSR is used

Advanced DOM interactions that you say? Whaaaat ?? ... Yep - at this point, because the DOM has been updated (but the user has not yet seen the update in the browser), you can intercept the actual painting on the screen using window.requestAnimationFrame , and then do something like measure the actual elements The DOMs that will be output to which you can make additional state changes are super useful, for example, animating to the height of an element with unknown contents of variable length (since now you can measure the contents and assign height to the animation) or to avoid flash scripts Enta during some state change.

Be very careful though, to protect state changes in any componentDid... , because otherwise an endless loop may occur, because changing the state will also lead to re-rendering, and therefore to another componentDid... and on and on.

Answer 5

According to the documentation ( https://facebook.imtqy.com/react/docs/react-component.html )

Prefixed methods will be called right before something happens and

Methods with the did prefix are called r immediately after something happens.

Answer 6

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

Theres "gotcha" though: an asynchronous call to retrieve data will not return until the renderer. This means that the component will render with empty data at least once.

Cannot pause rendering to wait for data to be received. You cannot return a promise from the WillMount component or argue in setTimeout somehow.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

our component will not have access to the internal user interface (DOM, etc.). We will also not have access to the referee of the children, because they have not yet been created. The component WillMount () is a chance for us to cope with the configuration, update our state and generally prepare for the first rendering. This means that we can begin to perform calculations or processes based on prop values.