React is a prominent JavaScript library that has fared well in the web development ecosystem and is still going strong even after its initial release on the 27th of May 2013.
According to StackOverflow Developer Survey (2022), 44.3% of developers have chosen React as one of the most popular web frameworks.
One of the talking points of React framework is its inbuilt state management feature. In this article, we will take a look at the famous useState hook in React.
Let’s say you have a doughnut shop and you need to keep track of all the doughnuts sold already. You would agree that this information will change as the day goes by and as sales go on.
You would need a way to keep track of this information somewhere and you can come back to it later.
useState hook in react allows you to do this in your react app. By the end of this article, you will be more than confident to implement the useState hook in your React apps.
What is a state?
State is data that changes over time based on the actions of users or other components in your React app. In React, a state can be anything for user input or items in a list.
What is useState?
useState is a hook in React that allows you to add basic state management to your React apps. I say basic because there are pros and cons to the useState hook. Other state management libraries like redux, zustand, and context API solve some of the cons of the useState hook.
Here is the syntax for the useState Hook:
const [state, setState] = useState(initialstate)
state: current state of the component.
setState: Setter function to update the state.
initialstate: Initial value of the state.
Before going in to figure out how to the useState hook in React. Let's look at some pros and cons of useState hook in React.
Like any tool no matter how powerful its capabilities are there is always some sort of advantages and disadvantages. Here are a few of those:
Pros:
Easy to use: The useState Hook is very easy to use. It only takes two arguments and it returns an array with two values. This makes it very easy to get started with the useState Hook.
Efficient: The useState Hook is very efficient. It does not create any new objects or functions. This makes it very performant.
Flexible: The useState Hook is very flexible. It can be used to manage any type of state, including strings, numbers, objects, and arrays. This makes it very versatile.
Cons:
Limited to Functional Components: The useState Hook can only be used in functional components. If you are using class components, you will need to use a different method for managing state.
Can be difficult to manage complex states: While the useState Hook is great for managing simple states, it can be difficult to manage complex states. For complex states, you may need to use a state management library like Redux.
Overall, the useState Hook is a great tool for managing state in React. It is easy to use, efficient, and flexible. However, it is important to keep in mind its limitations and consider other state management options for complex state.
How to use the useState hook.
In other to understand the implementation of the useState hook in React we are going to be building a simple counter application in React.
Create a playground on codesandbox to test out what you are learning here.
In order to use the useState hook in React you have to import it first at the top. See the syntax below.
import {useState} from "react"
This single line makes useState library available for use in your React app. Now we can use the library to add a state to your react components.
The next step is initializing the useState hook. See the syntax below:
const [count, setCounter] = useState(0)
We just added a state to your React app. Remember we are building a counter app. The count variable currently holds a value of 0.
Let's go further by creating a simple UI to display the count value and some buttons to control what happens to the count.
import {useState} from 'react'
export default function App() {
const [count, setCounter] = useState(0)
return (
<div className="App">
<h1>Counter</h1>
<h4 className="counter"> {count} </h4>
<div className="buttons">
<button
onClick={()=>{setCounter(count +1)}}>+</button>
<button
onClick={()=>{setCounter(count-1)}}>-</button>
</div>
</div>
);
}
Try it here:
The code above implements the useState hook in React in a simple counter application.
The setCounter otherwise known as the setter function updates the state. For increasing the count, the setCounter takes the current value of the state and adds 1 to it every time the plus button is clicked.
Likewise, when the minus button is clicked setCounter takes the current value of the state and subtracts 1 every time the minus button is clicked.
Conclusion.
To summarize, the useState hook in React is a vital tool to manage state in functional components.
It is simple to use, efficient, and versatile, enabling you to handle any type of state such as strings, numbers, objects, and arrays.
You can also use it to store multiple values. The useState hook simplifies the process of building complex user interfaces and aids in managing data that changes over time. Therefore, it is highly recommended to master the useState hook in React.