Which one is called first? constructor or componentDidMount or Render

Viewed 2690

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>);
}
}
1 Answers
Related