REACT & its Lifecycles: The Basics

Cori b
1 min readJun 28, 2021

--

You can think of the React Lifecycle as the events that happen from start or creation to death!

Every component goes through the complete lifecycle which includes: Mounting, Updating and Unmounting. Below is a diagram of the lifecycle from the official React documentation.

Let’s start with Mounting, the main part of React is to modify the DOM to match the components that are rendered. This process of creating instances and DOM nodes corresponding to React components, and inserting them into the DOM, is called mounting.

Mounting is basically the process of outputting the virtual representation of a component into the final IU representation.

Mounting built-in methods include: constructor( ), getDerivedStateFromProps( ), render( ), and componentDidMount( ).

Updating

A component is updated when there is a change in state or props.

Updating built-in methods include: getDerivedStateFromProps( ), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate( ), and componentDidUpdate( ).

Unmounting

Unmounting happens when a component is removed from the DOM.

Unmounting only has on built-in method, which is componentWillUnmount().

I hope this article was helpful with understanding React Lifecycles.

--

--