React Lifecycle

The lifecycle of a React component

Three main phases:

The methods specific to each phase are called lifecycle methods, and are technically particular to class-based components.

Hooks are abstracted versions of these lifecycle methods and are used in functional components.

When a new component is created and inserted into the DOM; aka when the life of a component begins.

Only happens once and is referred to as the "initial render".

When a component is re-rendered as a result of changes to either its props or state.

This phase can occur multiple times and is the main point of React

When a component is removed from the DOM; aka when the life of a component ends.