componentWillMount() gets called before first render whereas componentDidMount() gets called after first render. Both of these components gets called only once

Please note that componentWillMount() is deprecated in latest React version v16

Most discussed topic still explaining my understanding. ComponentWillMount executes before render as name suggest ComponentAfterMount executes before render once component gets rendered on screen as name suggest.

look at console logs in example

class App extends React.Component {
 componentWillMount(){
 console.log("console loging before component will mount");
 }
 componentDidMount(){
 console.log("console loging after mounting component");
 }
 render(){
 console.log("rendering component")
 return(
 <div> component</div>
 )
 }
}
ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root' />

Difference

componentDidMount()

• invoked immediately after a component is mounted.
• it's gets called only once per mounting so good place for network requests and subscriptions.
• do not assign state here or call setState.

componentWillMount()

• invoked just before mounting occurs.
• the only method which is called on server-rendering
• should avoid using this ( it is a legacy method and will be removed in upcoming react version ).

You should avoid using componentWillMount and use componentDidMount and constructor instead Please check the official react docs for more info

• reactjs