Which one is called first? constructor or componentDidMount or Render

Question

As i've read online and official documentation. Order is Constructor-> ComponentWillMount -> Render -> ComponentDidMount and others.

class Navigation extends Component {
    constructor(props) {
        super(props);
        console.log('constructor', this);
        this.state = { items: [ ] };
    }

componentDidMount() {
    console.log('componentDidMount');

    if ( toDisplay( ) ) {
        api.bringCats()
        .then( categories => {
            const tot_cat = categories.map( cat => { return {name: cat.name, link: cat.link}; })
            this.setState({items: tot_cat,})
        })
    }
}

render() { 
    console.log("render")
    //some stuff
}
}

im expecting the the log to be in this order 1. constructor 2. ComponentDidMount 3. render

im logging this with constructor inside constructor method. im able to get value for items which is getting its value in componentDidMount why this is happening? and its logging in the correct order (constructor->didmount->render) but why im getting value of items even before calling componentDidMount.

im using <Navigation/> component inside <Header/>

Header extends Component{
render(){
  return (<div> <Navigation/> </div>);
}
}

Because by the time you go looking at the log of the constructor one, the script has had time to run and populate the instance object — Patrick Evans, Jul 03 '17 at 19:45
How? i mean if its going to ComponentDidMount() first, it should log `componentdidmount` and populate the object right? but the order its getting logged is correct. as per the doc. its not logging like `didmount->constructor->render` — Naveen, Jul 03 '17 at 19:50
Its not calling them out of order. The object view in a js console log is a live view of the object. Meaning when the script changes that object, the console will update that view to reflect those changes. And since those calls take milliseconds to execute by the time you go to look at the log its already been updated since by that time didmount has already ran and updated the instance — Patrick Evans, Jul 03 '17 at 19:54
In other words a console log of an object is not a __static__ view of that object at that specific time. — Patrick Evans, Jul 03 '17 at 19:57
Thank you. I'm sorry I'm still in confusion I'm just getting started with react and node. — Naveen, Jul 03 '17 at 20:02
Related: [Is Chrome's JavaScript console lazy about evaluating arrays?](https://stackoverflow.com/q/4057440/218196). There should also be a tiny `i` button next to the value which tells you that the output was computed at the moment the object was expanded. — Felix Kling, Jul 03 '17 at 20:12
This doesn't have anything to do with React and Node btw, just with how the console in browsers work. — Felix Kling, Jul 03 '17 at 20:13
This makes sense now `it is due to console.log() being queued up, and it prints a later value of the array (or object).`. It was the delay with the console. I was lost somewhere. Thank you so much. Will this happen with Firefox's console? — Naveen, Jul 03 '17 at 20:20
You could stringify the items you are interested in, like `JSON.stringify(this.props)` — Icepickle, Jul 04 '17 at 08:55

score 0 · Answer 1 · answered Jul 04 '17 at 16:37

i was trying something and found out that this is working fine.

window.cnj = require('circular-json') /* i added this in starting point first line so i will have access to this inside all imports. */

window.props = JSON.parse(window.cnj.stringify(simple));

I can access window.props from the devtools and its working as expected.

sample can be string, arrays, normal object or circular object.

Which one is called first? constructor or componentDidMount or Render

1 Answers1