Functional Components VS Class Components
A Comparison Between Syntax & State
I’ve recently discovered React Hooks. I was trying to make them work in Class Components and made myself incredibly confused. Once I realized React Hooks are only used in Functional Components, I was amazed by them. I have plenty more to learn about them, but I wanted to understand some basic differences between Functional and Class Components. Two differences I want to share are syntax and state management.
Note: I've noticed Functional components can be written in ES6 style or classic style. const FunctionalComponent = () => {
return( // This is the ES6 style)
}.............................OR................................function FunctionalComponent() {
return( // This the classic function style.)
}Both ways work, so choose what you're comfortable with. I will be using ES6 in my examples.
Syntax Differences
Image A and Image B are currently doing the same thing. They are just rendering an h1 tag. Both Functional and Class Components need to still import React. You can see the difference that line 3 in Image A is a function where as line 3 in Image B is a class. Another big difference is render. A Functional Component does not need the render function because the Functional Component itself is a render function. Whatever is returned from that function is what will be rendered. The Class Component is not a function, thus not able to render anything, so it needs the render function. Both Functional Components and Class Components need to be exported, so don’t forget that.
State in Functional Components & Class Components
Class Component & State
Let’s look at what State looks like in a Class Component and how it can be updated.
The code above will change the count state through what’s seen below. If you click on the +1 button, the count state will be increase by one. If the -1 button is clicked, the count state will decrease by one. The image below shows the state of name, favoriteAnimal, and count being rendered onto my local host.
So, in a Class Component the state is made in the constructor. Then, the state is changed using setState() within the handleIncreaseClick function and the handleDecreaseClick function. Now let’s look at how Functional Components can change the state.
Functional Component & State
Functional Components did not deal with State in any way in the past. Functional Components were pretty much used to just show data, not change it in anyway. That has changed thanks to React Hooks. I won’t go into much detail about React Hooks, but I’ll show how they let you manage state in a Functional Component compared to a Class Component.
Notice we no longer have a constructor to build out states. Functional Components build their states line by line using the general format of
const [variableName, setVariableName] = useState()
variableName and setVariableName can be anything such as const [chicken, setChicken] = useState(). A quick take-away is that the first variable in the array (i.e. variableName) is what the current state is. The second variable is the array (i.e setVariableName) is a function that allows us to update the sate. useState() is where you initialize the state’s value. In the code above we have a current state of count with the value of 0. Notice that the functions handleIncreaseClick and handleDecreaseClick are using setCount to update the count. That’s the simple example to change the state within a functional component.
The code above will still render the same basic content and our Class Component did.
Those are a couple of basic difference between a Class Components and Functional Components. I encourage that you play with both Functional and Class Components. Both are fine to use, but I’m starting to lean towards Functional Components since they look cleaner. I also like the ease of setting the state within a Functional Component.
Please feel free to use the code on my GitHub and play around with it.
Share your experiences and opinions about Functional and Class Components. Enjoy your learning journey!
Functional Components did not deal with State in anyway in the past. Functional Components were pretty much used to just show data, not change it in anyway. That has changed thanks to React Hooks. I won’t go into much detail about React Hooks, but I’ll show how they let you manage state in a Functional Component compared to a Class Component.
