Why should addChangeListener be in the component DidMount instead of componentWillMount?

Question

I saw this line as an answer to another question here:

"componentWillMount must be a component of DidMount, otherwise you will skip event emitters in node."

and I don’t get it. Can someone explain in more detail?

Additional Information:

Building a responsive application with a stream, as part of the original rendering, the child component calculates some data. Ideally, after calculating this data, I would like to invoke an action that updates the state of the repository using some of this new data.

Typically, a repository state update generates a change event that causes a re-rendering. However, since the change listener is not added to the componentDidMount component (and not to componentWillMount), my top-level component cannot listen to the change that occurs during the initial rendering and trigger re-rendering.

If you move addChangeListener to the WillMount component, which seems to fix this problem, but the above quote suggests that this is a bad idea?

Answer 1

It is difficult to understand what this quote means without additional context. I can tell you that there are huge differences between the two methods.

On the one hand, componentWillMount is called before the component is actually added to the DOM. This is the last chance that you need to update the state of the component and get it until it is displayed by the browser.

On the other hand, componentDidMount is called as soon as the component has been attached to the DOM (real).

What you really need depends on your use case. In the general case, componentDidMount used for integration with other libraries (for example, jQuery), it provides a way to change the HTML displayed by the component.

I suggest you read these links:

• https://facebook.imtqy.com/react/docs/component-specs.html#mounting-componentwillmount
• https://facebook.imtqy.com/react/docs/component-specs.html#mounting-componentdidmount
• https://facebook.imtqy.com/react/tips/use-react-with-other-libraries.html

Answer 2

I think the prevailing wisdom that listeners should set in componentDidMount because it prevents problems in isomorphic applications is a mistake. I think that in 98% of cases for non-isomorphic applications, setting listeners in componentWillMount and componentDidMount will work the same way, but this is conceptually wrong and in 2% of cases (for example, the example given in the original question), it will do the wrong thing.

There are git discussions and comments in the React source code suggesting that it would be preferable that componentWillMount is not called at all on the server, but if it is not, then problems are created in the checksum test comparing the prerender server with the original client rendering. Having a componentWillMount on the server means that it is not running as part of the component life cycle in this case, but it is used as an excuse not to consider it part of the life cycle in any case.

In fact, componentWillMount is exactly the place where you need to register listeners if you are not creating an isomorphic application. If you are creating an isomorphic application, you need to make some tradeoffs because the checksum / lifecycle problem is not ideal in this case (maybe this is just testing for a server environment and then not registering listeners?).

In non-isomorphic applications, adding listeners to componentWillMount in some cases can save unnecessary re-renderings and register them in document order. The advantage of ordering a document is that if you have a way to reset incomplete events as you re-visualize the components (for example, takeRecords to MutationObserver ), you can make sure that the document is redrawn from top to bottom, and not from bottom to convert rendering complexity to linear from polynomial.

In addition, there is no dangerous period between the initial render and when the registrar is registered, where the Store can change without starting the render, as a result of which the view is not synchronized with the Store (an example of the problem asked in the original question). If the listener is registered in componentDidMount , you need to either make sure that the Store is not changed in calls to componentDidMount in children, or force to re-render / re-synchronize after registering the listener, which if done in componentDidMount is performed in the reverse order, which can be polynomial complexity ( depending on how / if the React setStates aggregated).