Life Cycle of a Component

Life cycle of a component can be defined as the series of methods that are invoked in different stages of the component existence.
Stages are:

• Initialization
• Mounting
• Updating
• Unmounting

Function of each Phase of Cycle

1. Initialization

In this phase, we have to define the props and initial state of the component. This is done in the constructor of the component.

2. Mounting

In this phase, Initialization of the component is completed and the component is mounted on the DOM and rendered on the first time on web page.

• componentWillMount() Function
• componentDidMount() Function

3. Updating

It is the phase where the states and the props of a component are updated followed by some user events like click or press keyboard button etc.

• componentWillRecieveProps() Function
• setState() Function
• shouldComponentUpdate() Function
• componentWillUpdate() Function
• componentDidUpdate() Function

4. Unmounting

This is the final phase of the life cycle of the component that is the phase of unmounting the component from the DOM.
• componentWillUnmount() Function

Note: React follows a default procedure in the Naming Conventions of these predefined functions where the functions containing “Will” represents before some specific phase and “Did” represents after the completion of that phase.