DEV Community

Cover image for The React Lifecycle Methods: An Introduction
Adriana DiPietro
Adriana DiPietro

Posted on

The React Lifecycle Methods: An Introduction

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 life 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, 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 class component.
  • is a pure function; 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 JSX.
  • cannot modify component state 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.

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

Latest comments (4)

Collapse
 
am20dipi profile image
Adriana DiPietro

Totally agree. I plan on diving into Hooks on my next post. Thanks for commenting!!

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Just popped by to say I love the single colour cover images you keep using...they keep making me think that something has gone wrong so I spend longer looking at your article in the feed...very clever!

Nice article too by the way, but that was my secondary thought 🤣

❤🦄

Collapse
 
am20dipi profile image
Adriana DiPietro

Omg haha! Thanks so much for the comment