React: 15.4 breaks default param behavior on componentDidMount in production build

Created on 14 Dec 2016  路  5Comments  路  Source: facebook/react

Do you want to request a feature or report a bug?
bug

What is the current behavior?
only when NODE_ENV=production: null is being passed as first argument to componentDidMount. this becomes an issue when a default param is specified for componentDidMount.

from the backtrace from the componentDidMount call it seems like the difference between 15.3 and 15.4 is the extra arg argument in this line:

https://github.com/facebook/react/blob/308e0b77863071f31cff7aec74e359603526274e/src/renderers/shared/stack/reconciler/CallbackQueue.js#L73

Repro
https://github.com/kentor/throwaway/tree/master/react-15.4-breaks-default-param
clone the project then cd into it

cd react-15.4-breaks-default-param
yarn
npm run dev

open localhost:9966 (with an es6 supported browser) and open the console, it should log a message. kill the wzrd process

then run

npm run prod

then refresh localhost:9966, the console should log null

What is the expected behavior?
they should either both log this should be logged or they should both log null. development build and production build shouldn't differ in this regard

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
15.4. Everything was OK in 15.3

Bug

Most helpful comment

because react-router transitions where only params change do not call componentDidMount, even though it needs to fetch data using the new param.

componentDidUpdate is generally a good place to do this.
But yea, I recommend against calling lifecycle methods manually.

All 5 comments

Thanks for the issue! While technically valid the use case sounds a bit confusing.

this becomes an issue when a default param is specified for componentDidMount.

Why are you specifying a default param in it? You shouldn't ever need to call this method, React calls it for you. If you want to share code between two lifecycle hooks, extract it into a third method.

Yeah the code would probably be clearer if the shared code is extracted to a third method.

I was manually calling this.componentDidMount() inside componentWillUpdate, because react-router transitions where only params change do not call componentDidMount, even though it needs to fetch data using the new param.

because react-router transitions where only params change do not call componentDidMount, even though it needs to fetch data using the new param.

componentDidUpdate is generally a good place to do this.
But yea, I recommend against calling lifecycle methods manually.

The change to CallbackQueue can likely just be reverted since it was used for passing around test options with ReactTestReconcileTransaction but we use hostContainerInfo for that now.

I'm pretty certain this issue doesn't exist in React 16.
If I'm wrong please let me know.

Was this page helpful?
0 / 5 - 0 ratings