React — Component Lifecycle

Photo by Jeff Rodgers on Unsplash

Each component in React has its own lifecycle. A component lifecycle is broken down into three phases: mounting, updating and unmounting. Each of these phases has methods that you can use in order to run code at a particular time.

Mounting

• Mounting is adding elements onto the DOM

The following four built in methods below are called (in this order) when mounting a component. The render() method is required, however, the other methods are optional.

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

Updating

• Updating is when a component is updated. A component is updated whenever theres a change in state or props.

The following five built in methods below are called (in this order) when a component is updated. The render() method is required, however, the other methods are optional.

1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

Unmounting

• Unmounting happens when a component is about to be removed from the DOM

React has one built in method when a component is unmounted

1. componentWillUnmount()

References

• React docs
• w3schools