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.
