React component lifecycle refers to the series of phases that a React component goes through from its creation to its destruction. This lifecycle is divided into three main phases for class components: Mounting, Updating, and Unmounting. Each phase provides specific lifecycle methods that you can use to hook into the process and execute code at different points.
Lifecycle Phases for Class Components
- Mounting Phase
- Updating Phase
- Unmounting Phase
Mounting
Mounting is the phase when a component is being created and inserted into the DOM. The lifecycle methods called during this phase are:
1. constructor(props):
- Purpose: Initialize the component’s state and bind event handlers.
- When Called: Before the component is mounted.
2. static getDerivedStateFromProps(props, state):
- Purpose: Update the state based on props before rendering.
- When Called: Before
render()method, both on initial mount and updates. - Returns: An object to update state or
null.
3. render():
- Purpose: Returns the JSX that describes the UI.
- When Called: During the mounting phase and when state or props change.
4. componentDidMount():
- Purpose: Perform side-effects such as data fetching or setting up subscriptions.
- When Called: Immediately after the component is mounted.
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
static getDerivedStateFromProps(props, state) {
return null; // Or update state based on props
}
componentDidMount() {
console.log('Component did mount');
}
render() {
return <div>Count: {this.state.count}</div>;
}
}
Updating
Updating occurs when a component’s state or props change. The lifecycle methods called during this phase are:
1. static getDerivedStateFromProps(props, state):
- Purpose: Same as in mounting; updates state based on props before rendering.
2. shouldComponentUpdate(nextProps, nextState):
- Purpose: Decide whether the component should re-render.
- When Called: Before
render()method, on state or prop changes. - Returns:
trueto update orfalseto skip.
3. render():
- Purpose: Re-render the component with updated state or props.
4. getSnapshotBeforeUpdate(prevProps, prevState):
- Purpose: Capture information from the DOM before it is updated.
- When Called: Right before the latest render output is committed.
- Returns: A snapshot value to be used in
componentDidUpdate().
5. componentDidUpdate(prevProps, prevState, snapshot):
- Purpose: Perform side-effects based on the changes.
- When Called: Immediately after the component is updated.
import React from 'react';
class MyComponent extends React.Component {
static getDerivedStateFromProps(nextProps, prevState) {
return null; // Update state based on props
}
shouldComponentUpdate(nextProps, nextState) {
return true; // Decide if re-render is needed
}
getSnapshotBeforeUpdate(prevProps, prevState) {
return null; // Capture some information from the DOM
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('Component did update');
}
render() {
return <div>Count: {this.state.count}</div>;
}
}
Unmounting
Unmounting is the phase where a component is removed from the DOM. The lifecycle method called during this phase is:
1. componentWillUnmount():
- Purpose: Clean up resources like timers, subscriptions, or network requests.
- When Called: Immediately before the component is unmounted and destroyed.
import React from 'react';
class MyComponent extends React.Component {
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return <div>Count: {this.state.count}</div>;
}
}
React’s lifecycle methods provide control over different stages of a component’s existence, allowing you to manage state, perform side-effects, and handle errors. With the introduction of hooks, functional components now offer a more flexible and powerful way to handle lifecycle events and side-effects.
