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.
