The React Lifecycle Methods: An Introduction
Tags: react, javascript, redux, lifecycle
Published: 2021-08-09 15:14:52

Welcome to an introduction to React Lifecycle Methods! This guide aims to help us learn a few things:
1. What is the React Lifecycle?
2. Why do we use React Lifecycle Methods?
3. What are some React Lifecycle Methods?
4. Vocabulary: "mounting", "unmounting", "JSX"

Now that we know what we will learn, let's get started. 

## What is the React Lifecycle?
You can think of the React Lifecycle as the <italic>life</italic> of a component. Each component experiences a lifecycle through mounting, updating, and unmounting. Colloquially, the birth, the growth, and the death of a component. 


### What is "mounting"?
Mounting establishes components into actual DOM elements that will be displayed in the DOM, and thus, to the client-side. 

### What is "unmounting"?
Unmounting, as we can imagine, is the process of removing DOM elements from the DOM.

### Why do we use React Lifecycle Methods?
In a previous [post](https://dev.to/am20dipi/introduction-to-react-s-components-2ieg), I explained what React is and what React Components are. To summarize, React uses a component-architecture to make building user interfaces more efficient. As components allow an application to implement a separation of concerns, or the single responsibility principle, there are a lot of moving parts(ahem, components) to a React-built application. 

Therefore, components need to only "live" on the client-side when necessary. Hence, a lifecycle! 

We only want users to see a component's rendered output when it makes sense because we want our application experience to be succinct and easy. 

For example, a component called "SignupForm" may only be mounted when the signup link is clicked and may be unmounted as the user is redirected to the application home page after successful a signup. 

### Some Lifecycle Methods:

#### render()
- is the most used lifecycle method, as it is required in every React <strong>class component</strong>.
- is a <strong>pure function</strong>; render() has no side effects => it will always returns same output given the same input. 
- is in charge of rendering your component to the UI.
- returns <strong>JSX</strong>.
- <italic>cannot modify component state</italic> as its principal purpose is to render the component to the client.

#### constructor()
- is called before a component is mounted.
- is used for initializing local state.
- assigns an object to "this.state" through super(props).
- is no longer necessary for class components through ES6.
- can be replaced with creating an object using "this.state".

#### componentDidMount()
- gets invoked after a React component has been mounted. 
- supplies a place for API calls and fetching remote data. 
- allows you to use setState() to update state.  

#### componentWillUnmount()
- gets invoked just before the component unmounts. 
- represents the end of a component's lifecycle.
- implements "clean up", such as clearing a timer, clearing a cached store. 

### Vocabulary
- JSX: stands for JavaScript XML; it is syntactic extension of JavaScript that allows us to write HTML in React. 
- Mounting: placing a component into the DOM.
- Unmounting: removing a component from the DOM.
- setState(): when called, tells React that the state has changed. 
- Single responsibility: assigning individual responsibility to individual pieces, such as components.
- pure function: a function that returns the same output given the same input; has no side effects. 


:ringed_planet: Thank you for reading along. 
:ringed_planet: Comment below to continue the discussion!