Class Components vs. Functional Components

Taking a deeper look at React’s core components

When using components to render your pages or views in React, you will either use a class component or a function component. The question is, which one should you be using and why? This may seem like somewhat of a trick question as you are more than likely going to be dealing with both in your future.

Let’s first take a look at a class component and a functional component that both return what kind of component they are.

Class Component:

Functional Component:

As you can see they both share similarities, yet have their defining features that differentiates them from one another. The dead giveaway on identifying the difference between them simply lies in reading the first line of your component. React is nice enough to let you know what you are directly dealing with.

Now you are probably wondering why we have two types of components if they both can both render the same items? Well, that has to do with lifecycle methods and state, although thanks to React Hooks we can now use state within a functional component. Which leads us to..

State

Before we get into talking about lifecycle methods let’s first talk about state and since we will be using it while covering the lifecycle methods there’s no time like the present. What really is state? To put it simply, state is where dynamic data of any kind can be stored. This can vary in scope and size from a single user’s information to colors. You can store whatever data you want within your components state.

Class Component

Now that we have an idea of what state actually is let’s get into actually setting and using it. We will first start with setting state in our class component as this was the convention for many years but let’s not get ahead of ourselves because hooks are discussed in the next section. We have the ability to set state by default if we would like. For example:

As you can see I have set the default state of username to my own and them can call upon that state to display. This does not seem very dynamic as the state is currently hard coded. What if we had a different user sign on to use our app? This is where we can call upon the setState() method React offers us. This allows us to change our state which we will either place into a function or method. For this example I have created an anonymous function to change the state of username should the button be pressed.

The setState() method allows us to more dynamically set our state when certain functions, in this case, or methods will execute which will be seen in the lifecycle methods section.

Functional Component

As I have stated before a couple times, in the past state was could only be set and used within class components. As of February 2019, React introduced Hooks which allow us to now set and use state within a functional component. Although we are still dealing with state, setting and using it, it will look different from that of a class component. Take a look at this example:

You can see that we have declared our current state of username to my own, but also a function that will let us update our state of username specifically. We are also able to call upon our state in a much simpler fashion by just calling upon username. Most see this as a better approach as when dealing with class components on a larger scale application it can get difficult to differentiate between all of your this’s when dealing with state.

Lifecycle Methods

Now that we have a better idea of state and how it is used, let’s dive in and talk about lifecycle methods. What are React lifecycle methods? First try to think of each of your components as a plant or a tree. Your component shares a similar lifecycle in that it must first be birthed, then will grow, and will then eventually die. In React your component will mount, possibly update, and eventually unmount. This is the lifecycle of your component: birth, growth, and death.

For all these examples we will be pulling from the PokeApi, specifically for Mew: https://pokeapi.co/api/v2/pokemon/mew.

Mounting:

This is the birth of your component so to speak and one of the most common mounting lifecycle methods you will encounter is componentDidMount(). This lifecycle method is called upon as soon as the component has been mounted to the page. The most common use for this lifecycle method would be if you needed to make an external API call to populate your state. Below is an example of how we use componentDidMount() to update our state of favorite pokémon.

Updating:

This is where your component has the possibility to grow or update. The most common updating lifecycle method you will encounter is componentDidUpdate(). This lifecycle method is called upon as soon as the component has updated. The most common use for this lifecycle method you will see is when changes are made to prop’s or state reflected to the DOM. As an example, a student’s favorite color is set by default when creating a profile. Should that student change their favorite color from the default, this lifecycle method will run to reflect the difference on the DOM. In the example below once state has been updated we will receive an alert after 2 seconds that it has done so.

Unmounting:

This is the last step in the component lifecycle, death, or the unmounting of your component. The most common unmounting lifecycle method you will encounter is componentWillUnmount(). This lifecycle method, as with the previous two if you been reading along diligently, will execute similarly as the name suggests. This lifecycle method is called upon the component the moment just before it is unmounted from the DOM. In this example we will need to create a new class component that we will unmount from out page.

We will also create an alert within the componentWillUnmount() just so that we can see it in action. We will import the Unmount component as well as creating a function to change the state of our message being displayed or not. There are a handful of ways this can be done but I have chosen to do it like so:

!! Bonus Points !!

If you decided to play around with the code and have been closely following along I pose this question to you and encourage you to leave your answers in the comments.

After having unmounted the component as well as every button press thereafter, why do you still receive an alert letting you know that your favorite pokemon has changed?

Hint: The answer lies within the lifecycle methods section.

If you would like to view a copy to play around for yourself or just for reference, you can find the link for the GitHub here.

I would like to thank you for reading along and hope that you learned something new!