Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component’s existence. A React Component can go through four stages of its life as follows.
- Initialization: This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.
- Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.
- Updating: Updating is the stage when the state of a component is updated and the application is repainted.
- Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.
Mounting: componentWillMount() ==> render() ==> componentDidMount()
Updating:
componentWillReceiveProps() / setState() –>
shouldComponentUpdate() –> componentWillUpdate() –> render() –> componentDidUpdate()
UnMounting:
componentWillUnmount()