Lifecycle methods in React are special methods built into class components that allow you to run code at specific points in a component’s life. These methods are categorized into different phases of a component’s lifecycle.
- Mounting Phase
- Updating Phase
- Unmounting Phase
1. Mounting
Mounting means putting elements into the DOM.
React has four built-in methods that gets called, in this order, when mounting a component:
constructor():
Initialize state and bind methods.getDerivedStateFromProps():
Update state based on props.render():
Define the UI.componentDidMount():
Perform side-effects like data fetching.
2. Updating
Updating occurs when a component’s state or props change.
getDerivedStateFromProps():
Same as mounting.shouldComponentUpdate():
Optimize performance by controlling updates.render():
Define the updated UI.getSnapshotBeforeUpdate():
Capture DOM information before updates.componentDidUpdate():
Perform side-effects after updates.
3. Unmounting
The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.
React has only one built-in method that gets called when a component is unmounted:
componentWillUnmount():
Cleanup before removal.