State in Functional Components vs Class Components
Syntax differences to setting & updating the state.
I am discovering React hooks and the first one I want to dig into is useState
. I am trying to understand the magic that lies underneath. I’ll be sharing my basic understanding to clear up my thinking to keep moving forward with future learning.
React has two types of components: class components and function components. When I first learned React, I was told the state can only live in a class component. I was under the impression that functional components were used for more simple tasks such as rendering cards. My basic understanding of the two is that class components have state and functional components do not have state. React hooks have changed that. I’ll compare the syntax difference between using state in class component and using a state in a functional component.
Here is an image of what we’ll comparing the functionality of state for class components and functional components. Feel free to clone my git repository to play with class and functional components yourself.
We will be able to click on the blue button to increase the value of how many times the blue button was clicked and the same goes for the red.
Class Component State
The class component image above shows shows the classic way of using state. Notice in line 8 the state is being set with two keys, blueCount
and redCount
. The functions handleBlueClick
and handleRedClick
is what will increment the values of blueCount
and redCount
respectively. This is done by using this.setState()
. The setState()
function is what will update the desired key. If you click on the colored buttons, the value will increase.
Functional Component State
The functional component can now handle state thanks to React Hooks. The syntax to initialize the state and update the state is different, but will have the same result as the previous class component.
The first difference is in line 1. We are no longer importing Component
because we are working with a functional component. Instead, we import useState
which is what will allow us to update the state.
The next difference is line 6 and 7. The constructor
no longer exists. Now we have the new syntax of const [something, setSomething] = useState()
. There are a couple of things happening when creating the state in the functional component. First, the pattern of
const [something, setSomething] = useState()
is called array destructoring. I found the explanations of array destructoring from a LogRocket Blog, LogRocket video, and Web Dev Simplified video useful for more technical explanations. Here is my simplified version.
In const [blueCount, setBlueCount] = useState(0)
, blueCount
is the key that will hold the state value. setBlueCount
is a function that will update the value of the key blueCount
. The useState(0)
is what is setting up the initial value of the key blueCount
.
The function handleBlueClick
in line 9 of the functional component calls the function setBlueCount
. Notice how the function setBlueCount
takes in the state blueCount
, which is initialized to be 0, and then increments the value by 1.
Below is a quick reference to show the syntax of state between class and functional components when setting the state and updating the sate.
Setting the State
Class Component . Functional Component
State . State
.
this.state = { .
blueCount: 0, . const [blueCount, setBlueCount] = useState(0)
redCount:0 . const [blueCount, setBlueCount] = useState(0)
} .
Updating the State
Updating State in Class ComponenthandleBlueClick = () => {
this.setState({
blueCount: this.state.blueCount + 1
})
}. . . . . . . . . . . . . . . . . . . . . . . . Updating State in Functional Componentconst handleBlueClick = () => {
setBlueCount(blueCount + 1)
}
I hope the quick reference is a tool you use when beginning with the React Hook useState
and then never think of again once you’ve mastered functional components.