React lifecycle hooks are methods where you can do appropriate things
We'll look at all the available lifecycle methods, the order in which they are called and what kind of operations you can perform within a particular life cycle hook.
React version in discussion: v16
constructor()
can be used to set initial state of the component
componentWillMount()
- You can initialize state and initial props here
- Only hook that run on server rendering
- Don't make a ajax call here
- Sometimes based on props you can change the state here
- You can set global events like eg :
componentWillMount() {
if(window.innerWidth > 500) {
this.setState({innerWidth: window.innerWidth})
}
}
render()
- Don't set state here, will lead to re-render
- DOM element can be removed once this is called
componentDidMount()
- This runs after the component has rendered
- This doesn't run until the child components have completed their hooks
- Only runs during initial life cycle
- Can make a ajax call here
- Can do subscriptions here and unsubscribe in componentWillUnmount method
- Don't run setState here
componentWillRecieveProps(nextProps)
- Not called on initial render
- Runs when you re-render by updating the state or prop
- We can setState here
ShouldComponentUpdate(nextProps, nextState)
- Runs when there is change in state or props
- Used for controlling the re-rendering of the component
- Can check the change in state
- returning false will will stop re-rendering of this component. This return true by default.
- Don't run setState here
componentWillUpdate()
- Runs after shouldComponentUpdate
- This is similar to ComponentWillMount
- Can do all set some variables based on states and props
- Don't run the setState here to avoid infinite loop
componentDidUpdate()
- Runs after updating render()
- Can setup third party UI elements here
- Can call setState here
ComponentWillUnmount()
- Runs when component dies
- Can cancel any outgoing network requests
- Can remove all event listeners associated with the component
- You can unsubscribe the subscriptions here.
- Don't run setState here
Sample Component will all lifecyle methods
class App extends Component {
constructor() {
super();
this.state = {
name: 'John';
}
}
componentWillMount() {
}
componentDidMount() {
}
componentWillRecieveProps(nextProps) {
}
shouldComponentUpdate(nextProps, nextState) {
return true;
}
componentWillUpdate() {
}
componentDidUpdate(prevProps, prevState) {
}
componentWillUnmount() {
}
render() {
return <div>Hi</div>;
}
}
Simple example showcasing lifecycle methods triggering order when a ParentComponent renders a ChildComponent

Update to this Article
These life cycle method are valid for React version before V.1.63
Methods deprecated in React V16.4 are:
- componentWillMount and can be used as UNSAFE_componentWillMount
- componentWillReceiveProps and can be used as UNSAFE_componentWillReceiveProps and replaced by getDerivedStateFromProps in V16.4
- componentWillUpdate and can be used as UNSAFE_componentWillUpdate and replaced by getSnapshotBeforeUpdate in V16.4
New article for lifecycle methods coming soon...