In React component lifecycle has 3 phases:
- Mounting
- Updating
- Unmounting
Component goes through several stages of its lifecycle, starting from the moment it is created and ending with the moment it is destroyed.
1. Mounting: The Mounting stage is when a component is first added to the DOM. During this stage, the following methods are called in the following order:
- constructor(): This method is called before the component is mounted, it is used for initializing state, binding methods, and other setup tasks
- getDerivedStateFromProps(): This method is called before the render method, it allows the component to update its internal state in response to changes in props.
- render(): This method is responsible for rendering the JSX that represents the component.
- componentDidMount(): This method is called after the component has been rendered to the DOM. It is used for performing setup that requires the component to be in the DOM, such as fetching data or adding event listeners.
2. Updation: The Updating stage is when a component updates its state or props. During this stage, the following methods are called in the following order:
- getDerivedStateFromProps(): This method is called before the render method, it allows the component to update its internal state in response to changes in props.
- shouldComponentUpdate(): This method is called before the render method, it allows the component to decide whether or not to re-render in response to changes in props or state.
- render(): This method is responsible for rendering the JSX that represents the component.
- getSnapshotBeforeUpdate(): This method is called before the component is updated in the DOM. It allows the component to capture some information from the DOM and state values.
- componentDidUpdate(): This method is called after the component has been updated in the DOM. It is used for performing operations that require the component to be in the DOM, such as fetching data or adding event listeners.
3. Unmounting: The Unmounting stage is when a component is removed from the DOM. During this stage, the following method is called:
- componentWillUnmount(): This method is called before the component is removed from the DOM. It is used for performing cleanup tasks, such as removing event listeners or cancelling network requests.
the lifecycle of a React component comprises three critical stages: Mounting, where the component is initialized and rendered to the DOM; Updating, where the component responds to changes in props or state and potentially re-renders; and Unmounting, where the component undergoes cleanup before being removed from the DOM.
Each stage has its specific methods that dictate the sequence and nature of operations, ensuring efficient and responsive component behavior throughout its existence.